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

ikfrs5lh 于 2023-05-28 发布在 React

关注(0)|答案(4)|浏览(190)

我正在使用react-native-vector-icons作为我的React native项目。最近，当我打开我的应用程序，它不断显示错误的图标，我是填写在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",

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

reactjs

来源：https://stackoverflow.com/questions/62911756/react-native-vector-icon-show-wrong-icon

4条答案

按热度按时间

hrysbysz1#

我也有同样的问题。它与手动链接和自动链接（新版本）有关
Details on autolinking
解决方案：npx react-native unlink react-native-vector-iconsnpm run android
npm run android实际运行：react-native run-android

赞(0）回复(0）举报 2023-05-28

i2byvkas2#

您应该以特定方式声明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}
///>

赞(0）回复(0）举报 2023-05-28

dwbf0jvd3#

这可能是由过时的图标字体文件引起的，您可能更新了软件包版本，但没有更新字体文件。尝试从“字体”文件夹重新复制字体文件。
https://github.com/oblador/react-native-vector-icons/tree/master/Fonts

赞(0）回复(0）举报 2023-05-28

62lalag44#

请遵循以下流程：
1.打开以下文件：ProjectDir/android/app/build.gradle
1.在文件末尾添加以下行：

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

1.运行命令：yarn start --reset-cache

赞(0）回复(0）举报 2023-05-28

我来回答

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

4条答案

相关问题

热门标签

最新问答