- 接下來介紹一下 在 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()