React Native使用Expo时图标显示不正确[(X)和?]

Question

React Native使用Expo时图标显示不正确[(X)和?]

react-nativeiconsfont-awesomeexpoionicons

4

我在我的应用程序中显示图标时遇到了问题。无论我导入什么图标，例如：来自React Native Base、@expo/vector-icons、react-native-vector-icons/Ionicons等等。

它只会显示(X)或?

我尝试了许多方法，包括使用React-Native的默认导入图标，但都不起作用。

参考：

1) https://ionicons.com/cheatsheet.html 2) https://www.npmjs.com/package/react-native-ionicons 我将在此处附上我的代码和截图，希望能解决我的问题。谢谢。

import Icon from 'react-native-ionicons'


        <ListItem style={styles.listitem_home} onPress={this.navigateToScreen('ExampleSendDataScreen')}>
          <Thumbnail square size={80} source={require('../../assets/images/message.png')}  style={{marginRight: 10}}/>
          <Body>
            <Text>{Strings.ST17}</Text>
            <Text numberOfLines={1} note style={styles.note_home}>{Strings.ST17}</Text>
          </Body>
          <Right>
            <Icon name="menu" style={styles.icon_home} />                
          </Right>
        </ListItem>

图标样式

icon_home:{

fontSize: 20,
color: 'black'
},

目前我的应用中唯一显示的图标是导航栏返回按钮。

编辑1：安装了@expo/vector-icons 9.0.0

编辑2：升级到Expo v32

Package.json

"dependencies": {
"@expo/vector-icons": "^9.0.0",
"@material-ui/core": "^3.9.0",
"@types/expo__vector-icons": "^6.2.3",
"antd-mobile": "^2.2.6",
"babel-plugin-import": "^1.11.0",
"es6-symbol": "^3.1.1",
"expo": "^32.0.0",
"firebase": "^5.8.1",
"haversine": "^1.1.0",
"moment": "^2.23.0",
"moment-timezone": "^0.5.23",
"native-base": "^2.8.1",
"prop-types": "^15.6.2",
"re-base": "^4.0.0",
"react": "16.5.0",
"react-dom": "^16.7.0",
"react-moment": "^0.8.4",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-native-audio": "^4.3.0",
"react-native-aws3": "0.0.8",
"react-native-button": "^2.3.0",
"react-native-elements": "^0.19.1",
"react-native-emoji-selector": "^0.1.6",
"react-native-fontawesome": "^6.0.1",
"react-native-gesture-handler": "^1.0.12",
"react-native-gifted-chat": "^0.7.2",
"react-native-gifted-messenger": "^0.1.4",
"react-native-image-picker": "^0.28.0",
"react-native-ionicons": "^4.4.6",
"react-native-keyboard-aware-scroll-view": "^0.7.4",
"react-native-linear-gradient": "^2.5.3",
"react-native-maps": "^0.22.1",
"react-native-navbar": "^2.1.0",
"react-native-render-html": "^3.10.0",
"react-native-router-flux": "^4.0.6",
"react-native-sound": "^0.10.9",
"react-native-splash-screen": "^3.1.1",
"react-native-timeago": "^0.4.0",
"react-native-vector-icons": "^6.2.0",
"react-navigation": "^3.0.7",
"react-navigation-header-buttons": "^2.1.1",
"react-simple-line-icons": "^1.0.8",
"scheduler": "^0.11.3",
"tcomb-form-native": "^0.6.20"  },

App.json

"expo": {
"name": "FirstTry",
"description": "This project is really great.",
"slug": "firsttry",
"privacy": "public",
"sdkVersion": "32.0.0",
"platforms": ["ios", "android"],
"version": "2.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"androidStatusBarColor": "#7bcbdb",
"androidStatusBar": {
"barStyle": "light-content",
"backgroundColor": "#7bcbdb"
},
"splash": {
  "image": "./assets/splash.png",
  "resizeMode": "contain",
  "backgroundColor": "#ffffff"
},
"updates": {
  "fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
  "**/*"
],
"ios": {
  "bundleIdentifier": "com.firsttry",
  "supportsTablet": true
},
"android": {
  "package": "com.firsttry",
  "versionCode": 2

}

新错误。在我的 ConfigApp.js 中，未定义的对象（在评估 '_expo.default.Constant' 时）不是一个对象。

ConfigApp.js

import Expo from 'expo';

const isStandAloneApp = Expo.Constants.appOwnership == "standalone";

const ConfigApp = {

// backend url
URL: "YOUR_BACKEND_URL",

// banner admob unit id
BANNER_ID: "YOUR_BANNER_ID",

// interstitial admob unit id
INTERSTITIAL_ID: "YOUR_INTERSTITIAL_ID",

// testdevice id, DON'T CHANGE IT
TESTDEVICE_ID : isStandAloneApp?"EMULATOR" : "EMULATOR"
};

export default ConfigApp;

Edit 3: 无法从"application\navigations\Logged.js"解析"@expo/vector-icons"。

const leftIcon = (navigation, icon) => <Ionicons
name={icon}
style={{marginLeft: 20}}
size={27}
color="white"
onPress={() => navigation.navigate('DrawerOpen')}
/>; 

  HomeScreen: {
screen: HomeScreen,
navigationOptions: ({navigation}) => ({
  headerLeft: leftIcon(navigation, "md-menu")
})
},

编辑4：图标仍未正确显示

- Alex Chong

4个回答

2

您必须使用

import { registerRootComponent } from 'expo';
import App from './App';

registerRootComponent(App);

替代

import {AppRegistry} from 'react-native';
import App from './App';

AppRegistry.registerComponent('main', () => App);

要注册您的主要组件。以下是Expo中的解决方案：https://github.com/expo/vector-icons/issues/89#issuecomment-475217923

- nntona

1

在我的情况下，我因为react-native-svg-transformer需要的一步骤而出现了SQUARE X's问题。这只是在我从SDK38升级到SDK40之后出现的问题。

对我来说，可行的解决方法是删除转换器模块要求我添加的metro.config.js文件。我甚至不确定我是否还在使用需要这个转换器的功能...将其删除对我没有任何不利影响。它可能会对你产生不利影响，但值得一试，看看它是否能修复你的问题。我在这里记录了一个错误，以提醒SVG Transformer团队，以防需要他们方面的修复。

https://github.com/kristerkari/react-native-svg-transformer/issues/128

总之，解决方法是删除metro.config.js文件（或者如果您在此模块更改之前已经有一个metro.config.js文件，则删除对其所做的更改），然后运行"expo start -c"并重试。

如果这有助于任何人，请告诉我！

- Atmas

0

我遇到了与图标无法正确渲染的相同问题，即使大多数设置都已经正确配置。

这与我使用了一个包含以下代码的自定义 metro.config.js 文件有关。

transformer: {
     babelTransformerPath: require.resolve('react-native-sass-transformer'),
},

这将覆盖矢量图标所需的转换器。最终我按照这个答案进行了操作，它起作用了：

使用metro配置多个转换器/解析器

- Zerta

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andrew · Accepted Answer

你不能在Expo中使用react-native-ionicons，因为安装过程需要更新本机代码。https://github.com/fanqfanh/react-native-ionicons 然而，Expo自带Ionicons，可以按照以下方式使用：

在组件顶部添加以下导入语句。

import { Ionicons } from '@expo/vector-icons';

然后像这样使用它们

<Ionicons name="md-menu" size={32} color="green" />

您还应检查此处使用的正确名称

https://expo.github.io/vector-icons/

这是因为vector-icons可以使用与您正在使用的原始图标包不同的名称。

有关Expo中不同图标的更多信息，请参阅文档。

https://docs.expo.io/versions/latest/guides/icons/

这是一个简单的小吃，展示了它的工作原理https://snack.expo.io/@andypandy/iconicons-example 它展示了iOS和Android图标之间的差异，以及如何根据平台切换它们。

import * as React from 'react';
import { Text, View, StyleSheet, Platform } from 'react-native';
import { Constants } from 'expo';
import { Ionicons } from '@expo/vector-icons';


export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Ionicons name="md-menu" size={32} color="green" />
        <Ionicons name="ios-menu" size={32} color="red" />
        <Ionicons name={Platform.OS === 'ios' ? "ios-menu" : 'md-menu'} size={32} color="blue" />
        <Ionicons name="md-checkmark" size={32} color="green" />
        <Ionicons name="ios-checkmark" size={32} color="red" />
        <Ionicons name={Platform.OS === 'ios' ? "ios-checkmark" : 'md-checkmark'} size={32} color="blue" />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems:'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

更新 `package.json` 文件

我已经在您的 package.json 文件中标注了哪些依赖项可以安全地删除。这些依赖项不应该被添加，因为它们要么需要访问本地代码，要么已经包含在 Expo 中。

"dependencies": {
  "@expo/vector-icons": "^9.0.0", // already included in expo
  "@material-ui/core": "^3.9.0",
  "@types/expo__vector-icons": "^6.2.3", // only required if you are using typescript, but I don't think you are using that
  "antd-mobile": "^2.2.6",
  "babel-plugin-import": "^1.11.0",
  "es6-symbol": "^3.1.1",
  "expo": "^32.0.0",
  "firebase": "^5.8.1",
  "haversine": "^1.1.0", 
  "moment": "^2.23.0",
  "moment-timezone": "^0.5.23",
  "native-base": "^2.8.1",
  "prop-types": "^15.6.2",
  "re-base": "^4.0.0",
  "react": "16.5.0",
  "react-dom": "^16.7.0",
  "react-moment": "^0.8.4",
  "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
  "react-native-audio": "^4.3.0", // can't be used in Expo as it requires native code
  "react-native-aws3": "0.0.8",
  "react-native-button": "^2.3.0",
  "react-native-elements": "^0.19.1",
  "react-native-emoji-selector": "^0.1.6",
  "react-native-fontawesome": "^6.0.1", // requires you to add the font yourself, also it is included in expo
  "react-native-gesture-handler": "^1.0.12", // already included in expo
  "react-native-gifted-chat": "^0.7.2",
  "react-native-gifted-messenger": "^0.1.4",
  "react-native-image-picker": "^0.28.0", // can't use this in expo as it requires native code
  "react-native-ionicons": "^4.4.6", // already included in expo, 
  "react-native-keyboard-aware-scroll-view": "^0.7.4",
  "react-native-linear-gradient": "^2.5.3", // can't be used in expo as it requires native code
  "react-native-maps": "^0.22.1", // already included in expo
  "react-native-navbar": "^2.1.0",
  "react-native-render-html": "^3.10.0",
  "react-native-router-flux": "^4.0.6",
  "react-native-sound": "^0.10.9", // cannot use this in expo as it requires native code
  "react-native-splash-screen": "^3.1.1", // cannot use this in expo as it requires native code
  "react-native-timeago": "^0.4.0",
  "react-native-vector-icons": "^6.2.0", // cannot use this in expo as it requires native code
  "react-navigation": "^3.0.7",
  "react-navigation-header-buttons": "^2.1.1",
  "react-simple-line-icons": "^1.0.8",
  "scheduler": "^0.11.3", // this is used internally by React, I don't think you require it here
  "tcomb-form-native": "^0.6.20"  
},

React Native使用Expo时图标显示不正确[(X)和?]

更新 package.json 文件

更新 `package.json` 文件