我用的是 react-native-vector-icons，另外还有一个叫做 react-native-icons 的字体文件插件，两个我也不知道有什么区别，但是react-native-vector-icons 是在 react-native-icons 的基础上进行改进的。
1、安装
npm install react-native-vector-icons --save
2、依赖 （Android）
react-native link react-native-vector-icons
依赖之后检查一下几个部分是否都已经添加，如果未添加可自行添加。
android/app/build.gradle 是app下的build.gradle
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle” // 添加
如果是要使用自定义字体文件：
// 添加
project.ext.vectoricons = [
iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // 字体文件的文件名
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
需把字体文件复制粘贴在 android/app/src/main/assets/fonts 下。
android/settings.gradle
rootProject.name = 'MyApp'
include ':app’
// 添加
+ include ':react-native-vector-icons'
+ project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
android/app/build.gradle
compile project(':react-native-vector-icons’) // 添加
MainApplication.java
+ import com.oblador.vectoricons.VectorIconsPackage;
....
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage()
+ , new VectorIconsPackage()
);
}
}
3、使用
导入字体文件：
import Icon from 'react-native-vector-icons/Ionicons';
// 使用
<Icon name='ios-person' size={30} color="#4F8EF7" />
不过我其实想用的是自定义字体文件，但是不知道为什么，一直都不显示，至今未解决。
