我的应用程序显示图标时出现问题。
无论我导入什么图标，例如:来自 React native base、@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'
},
我的应用程序中当前显示的唯一图标是 Navigator Back Button。
编辑 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:图标仍然无法正确显示
最佳答案
您不能使用 react-native-ionicons以Expo为安装过程需要你更新本地 代码。 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 中摆脱哪些依赖项.这些不应该被添加，因为它们要么需要访问 native 代码，要么已经包含在 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 - React Native 使用 Expo 没有正确显示图标 [ (X) 和 ? ]，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54453789/