RN 之 react-native-vector-icons

- 接下来介绍一下 在 RN 中使用 react-native-vector-icons

首先,看一下我RN当前的版本

在RN项目中 建议使用yarn 下载组件包

yarn add react-native-vector-icons

再看 react-native-vector-icons 的

先看看GitHub文档时怎么介绍的

我按照大概的意思是分这几个步骤

一：

找到项目底下 android/app/build.gradle 文件 （不是android/build.gradle 文件）

把 apply from: “…/…/node_modules/react-native-vector-icons/fonts.gradle”

换成
project.ext.vectoricons = [
iconFontNames: [ ‘MaterialIcons.ttf’, ‘EvilIcons.ttf’ ] // Name of the font files you want to copy
]

apply from: “…/…/node_modules/react-native-vector-icons/fonts.gradle”

二：

到项目下的 node_modules/react-native-vector-icons/Fonts 里的所有文件复制 到
android/app/src/main/assets/fonts 里面 （一般没有 assets/fonts，需要自己创建这两个文件）

三：

在 android/settings.gradle 文件 添加

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 文件 dependencies 配置 添加
compile project(‘:react-native-vector-icons’)

在新版本中 compile 建议使用 implementation

五：

再修改 android/app/src/main/java/… MainApplication.java文件

package com.myapp;

现在上面导入包
import com.oblador.vectoricons.VectorIconsPackage;

（到这步，建议先找到需要改的文件，看完后再决定需不需要改）

…

@Override
protected List getPackages() {
return Arrays.asList(
new MainReactPackage()
添加 new VectorIconsPackage()
);
}

}

你会发现 在新版本中 之前名字相同的配置文件 很多内容都跟以前不一样了

在步骤五中 在 new VectorIconsPackage() 后 你会发现项目报错了 原因可能是重复了吧

• 解决办法 步骤五中不用加 new VectorIconsPackage()