react-native-vector-icon 显示“错误”图标

Question

我正在将

react-native-vector-icons

用于我的 React 本机项目。最近，当我打开我的应用程序时，它不断显示我在

name

字段中填写的错误图标，或者显示该图标不存在（“问号”）。

我感觉很尴尬，因为大约一两周后就正常了。我一直在 SOF 或他们的 github 上搜索，但感觉没有希望。

你能帮我吗？

<Icon
    containerStyle={{
        display: (this.state.email.length > 0) ? 'flex' : 'none',
        marginRight: normalize(10),
    }}
    name="mail-outline"
    type="ionicon"
    color="#7384B4"
    size={22}
    onPress={() => {
        this.setState({ email: '' });
    }}
/>

这是我的代码，它应该显示邮件图标，但我已经得到了这个

这是我在我的

package.json

中使用过的一些相关依赖版本

"react": "16.9.0",
"react-native": "0.61.3",
"react-native-elements": "^1.2.0",
"react-native-vector-icons": "^7.0.0",

谢谢，祝你有美好的一天。

Answer 1

遵循此过程：

1. 打开以下文件： 项目目录/android/app/build.gradle

2. 在文件末尾添加行：

apply from:("../../node_modules/react-native-vector-icons/fonts.gradle");

3. 运行命令：

   yarn start --reset-cache

Answer 2

我也有同样的问题。这与手动链接与自动链接（新版本）有关

自动链接详细信息

解决方案：

npx react-native unlink react-native-vector-icons

npm run android

npm run android 实际上运行：

react-native run-android

Answer 3

您应该以特定方式声明

import Icon

，

示例：

import Icon from 'react-native-vector-icons/Ionicons'

例如：

import Icon from 'react-native-vector-icons/Ionicons'
//or you can use
//import Ionicons from 'react-native-vector-icons/Ionicons'

//usage

<Icon
    //containerStyle={{
        //display: (this.state.email.length > 0) ? 'flex' : 'none',
        //marginRight: normalize(10),
    //}}
    //i think it should be `style` not `containerStyle`
    //except you are using another lib to show icon
    style={{
        display: (this.state.email.length > 0) ? 'flex' : 'none',
        marginRight: normalize(10),
    }}
    name="mail-outline"
    color="#7384B4"
    size={22}
    onPress={() => {
        this.setState({ email: '' });
    }}
/>

//another way
//<Ionicons
//{...all props you need to define}
///>

Answer 4

这可能是由过时的图标字体文件引起的，您可能更新了软件包版本但没有更新字体文件。尝试从“字体”文件夹中重新复制字体文件。

https://github.com/oblador/react-native-vector-icons/tree/master/Fonts

Answer 5

有一个类似的问题，但必须说的是，我正在使用一个外部文件夹，其中保存了我试图让图标工作的文件，并为其保留了node_modules/react-native-vector-icons。 就我而言，解决方案是将一些资产/字体文件夹添加到 myProject/android/app/src/main 中，并将 MaterialCommunityIcons.ttf 文件从 myExternalFolder/node_modules/react-native-vector-icons 文件夹中放入。 在此之前，我已经在我的实际项目上安装了react-native-vector-icons（它使用外部文件夹中的文件），但是当我再次删除它时，图标仍然有效。