React Native Using Expo无法正确显示图标[（X）和？ ]
我在使用我的应用程序显示图标时遇到问题。 无论我导入什么图标，例如：从React本机库，@ expo / vector-icons，react-native-vector-icons / Ionicons等。
它只会显示（X）或？
我尝试了许多方法，包括使用React-Native的默认导入图标的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
}
新错误。 undefined不是我的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;
编辑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：图标仍无法正确显示
4 个答案:
答案 0 :(得分：1)
您不能将react-native-ionicons与Expo一起使用，因为安装过程要求您更新本地代码。 https://github.com/fanqfanh/react-native-ionicons
但是，Expo随附了可与Ionicons捆绑使用的离子，可通过以下方式使用：
在组件顶部添加以下import语句
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"
},
答案 1 :(得分：1)
就我而言，由于 react-native-svg-transformer 需要一个步骤，我得到了 SQUARE X。这是我从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”并重试..
如果这对任何人有帮助，请告诉我！
答案 2 :(得分：0)
您必须使用registerRootComponent而不是registerComponent来注册您的主要组件。这是Expo https://github.com/expo/vector-icons/issues/89#issuecomment-475217923
中的解决方案答案 3 :(得分：0)
我遇到了同样的问题，即使大部分设置正确，图标也无法正确呈现。
这与我使用了包含此代码的自定义 Metro.config.js 文件这一事实有关。
transformer: {
babelTransformerPath: require.resolve('react-native-sass-transformer'),
},
这将覆盖矢量图标所需的转换器。 我最终遵循了这个答案，并且奏效了：
相关问题
- React Native Chart不显示数据
- 使用react-native-elements在Icon中包含FontAwesome时出错
- 反应原生导入包在展示中显示错误
- React-Native-Elements SearchBar图标未显示
- React Native独立应用程序在显示第一个屏幕之前显示expo图标
- React Native项目未在Expo iOS模拟器中显示
- 如何使React本机图标大小灵活？
- React Native Expo Camera Preview没有显示
- React Native Using Expo无法正确显示图标[（X）和？ ]
- 没有使用style.container显示React Native样式
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？