React-Native项目矢量图标库(react-native-vector-icons)以及如何使用
我的React-native版本:0.79.1
首先注意版本适配,对于0.79.1的RN,建议使用 react-native-vector-icons@9.2.0
因为该版本的react-native-vector-icons已经通过了RN>=0.64.0的测试了,所以问题会更少。
-
安装字体图标库:yarn add react-native-vector-icons@9.2.0
- 前往 android/app/build.gradle 配置gradle
project.ext.vectoricons = [
iconFontNames: ['MaterialIcons.ttf', 'FontAwesome.ttf']
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
-
'MaterialIcons.ttf', 'FontAwesome.ttf,这两个是是我自己用的,你想用别的图标库就自己手动加进来,例如:想用"Ionicons",就改成下面4这样
-
project.ext.vectoricons = [
iconFontNames: ['MaterialIcons.ttf', 'FontAwesome.ttf','Ionicons.ttf']
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" -
验证图标库是否成功,可以在任何页面中引入:import Icon from 'react-native-vector-icons/FontAwesome';然后再使用图标:<Icon name="rocket" size={30} color="#900"/>
-
那么如果我想使用Ionicons字体图标怎么办?在完成第4步骤的基础上开始一下配置
-
将来node_modules\react-native-vector-icons\Fonts下的Ionicons.ttf文件复制到android\app\src\main下的assets下的fonts文件夹中去。(如果没有assets以及fonts文件夹,你就自己创建对应文件夹)
-
运行:yarn react-native run-android命令
-
可能会出现报错,这时候不重要,出现报错就把第7步骤删了。
-
重新用AS打开项目,重新编译
-
在你的页面中 import Ionicons from 'react-native-vector-icons/Ionicons';
-
使用<Ionicons name="home" size={30} color="#900"/>
<Ionicons name="aperture"/>