4

我在使用我的应用程序显示图标时遇到问题。无论我导入什么图标，例如：来自 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

包.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"  },

应用程序.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”）

在此处输入图像描述

配置应用程序.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

4 回答 4

6

您不能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. 这些不应该被添加，因为它们要么需要访问本机代码，要么已经包含在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"  
},
于 2019-01-31T07:39:05.613 回答
1

你必须使用

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

registerRootComponent(App);

代替

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

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

注册您的主要组件。这是世博会中的解决方案https://github.com/expo/vector-icons/issues/89#issuecomment-475217923

于 2019-09-12T01:29:43.060 回答
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”并重试..

让我知道这是否对任何人有帮助！

于 2021-03-04T17:53:29.367 回答
0

即使大多数设置正确，我也遇到了图标无法正确呈现的相同问题。

这与我在内部使用包含此代码的自定义 metro.config.js 文件有关。

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

这将覆盖矢量图标所需的转换器。我最终遵循了这个答案，它奏效了：

使用 Metro 配置多个变压器/解析器

于 2021-04-03T15:16:18.943 回答