react-native 字体文件 iconfont

我用的是 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 getPackages() {
    return Arrays.asList(
      new MainReactPackage()
+   , new VectorIconsPackage()
    );
  }
}

3、使用
导入字体文件:

import Icon from 'react-native-vector-icons/Ionicons';
// 使用

不过我其实想用的是自定义字体文件,但是不知道为什么,一直都不显示,至今未解决。

你可能感兴趣的:(react-native 字体文件 iconfont)