网站开发维护岗位职责网页免费代理

我的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"/>