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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容