我的React-native版本:0.79.1
首先注意版本适配,对于0.79.1的RN,建议使用 react-native-vector-icons@9.2.0
因为该版本的react-native-vector-icons已经通过了RN>=0.64.0的测试了,所以问题会更少。
  1. 安装字体图标库:yarn add react-native-vector-icons@9.2.0
  2. 前往 android/app/build.gradle 配置gradle
    project.ext.vectoricons = [
        iconFontNames: ['MaterialIcons.ttf', 'FontAwesome.ttf']
    ]
    apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
  3. 'MaterialIcons.ttf', 'FontAwesome.ttf,这两个是是我自己用的,你想用别的图标库就自己手动加进来,例如:想用"Ionicons",就改成下面4这样

  4. project.ext.vectoricons = [
            iconFontNames: ['MaterialIcons.ttf', 'FontAwesome.ttf','
    Ionicons.ttf']
    ]
    apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

  5. 验证图标库是否成功,可以在任何页面中引入:import Icon from 'react-native-vector-icons/FontAwesome';然后再使用图标:<Icon name="rocket"  size={30} color="#900"/>

  6. 那么如果我想使用Ionicons字体图标怎么办?在完成第4步骤的基础上开始一下配置

  7. 将来node_modules\react-native-vector-icons\Fonts下的Ionicons.ttf文件复制到android\app\src\main下的assets下的fonts文件夹中去。(如果没有assets以及fonts文件夹,你就自己创建对应文件夹)
  8. 运行:yarn react-native run-android命令

  9. 可能会出现报错,这时候不重要,出现报错就把第7步骤删了。
  10. 重新用AS打开项目,重新编译

  11. 在你的页面中 import Ionicons from 'react-native-vector-icons/Ionicons';
  12. 使用<Ionicons name="home"  size={30} color="#900"/>
           <Ionicons name="aperture"/>

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐