「已解决」react-native-vector-icons无法识别,icon始终为X

 在RN开发过程中使用react-native-vector-icons,按照流程,怎么都加载不出来,始终显示为下图

错误显示
加载失败显示的图标

 解决:

在执行完一系列操作后,重新运行react-native run-android命令。

完整步骤:

  1.  根目录下使用:
    npm install --save react-native-vector-icons // 下载库
    react-native link react-native-vector-icons // 自动关联
    npm install react-native-vector-icons --saveyarn add react-native-vector-icons安装。
  2. 成功后显示:
    目录
    app/src/main/assets/fonts路径
  3. Android端的配置(先更新安卓端)
    // 进入android/app/build.gradle文件,添加如下内容:
    
    project.ext.vectoricons = [
        iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ]
    ]
    apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
  4. 在项目中使用:

    import Icon from 'react-native-vector-icons/FontAwesome';
        ....
     <Icon name={'angle-right'} size={24} color={'#999'} />
  5. 最后执行  react-native run-android,RR刷新后成功显示:

    成功显示
    成功显示图标
发布了18 篇原创文章 · 获赞 11 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/qq_37800886/article/details/99623319