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

一:替换代码android/app/build.gradle文件部分代码

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

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

换成

  1. project.ext.vectoricons = [
  2. iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // Name of the font files you want to copy
  3. ]
  4. apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

二:复制文件react-native-vector-icons/Fonts

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

三:在 android/settings.gradle 文件 添加

  1. rootProject.name = 'MyApp'
  2. include ':app'
  3. + include ':react-native-vector-icons'
  4. + project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

四:在 android/app/build.gradle 文件 dependencies 配置 添加

  1. apply plugin: 'com.android.application'
  2. android {
  3. ...
  4. }
  5. dependencies {
  6. compile fileTree(dir: 'libs', include: ['*.jar'])
  7. compile "com.android.support:appcompat-v7:23.0.1"
  8. compile "com.facebook.react:react-native:+" // From node_modules
  9. + compile project(':react-native-vector-icons')
  10. }

在新版本中 compile 建议使用 implementation

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

  1. package com.myapp;
  2. + import com.oblador.vectoricons.VectorIconsPackage;
  3. ....
  4. @Override
  5. protected List<ReactPackage> getPackages() {
  6. return Arrays.<ReactPackage>asList(
  7. new MainReactPackage()
  8. + , new VectorIconsPackage()
  9. );
  10. }
  11. }

RN 0.64 新版中

  1. package com.myapp;
  2. + import com.oblador.vectoricons.VectorIconsPackage;
  3. ....
  4. @Override
  5. protected List<ReactPackage> getPackages() {
  6. @SuppressWarnings("UnnecessaryLocalVariable")
  7. List<ReactPackage> packages = new PackageList(this).getPackages();
  8. // Packages that cannot be autolinked yet can be added manually here, for example:
  9. // packages.add(new MyReactNativePackage());
  10. packages.add(new VectorIconsPackage())
  11. return packages;
  12. }

你会发现 在新版本中 之前名字相同的配置文件 很多内容都跟以前不一样了
在步骤五中 在 new VectorIconsPackage() 后 你会发现项目报错了 原因可能是重复了吧

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