react-native-vector-icons使用遇到的大坑

第一次寫文章,也是第一次用react-native,有須要改正的地方但願你們多多指點.因爲公司業務以及需求的擴大,用JQ寫App已經知足不了當前的需求,急需一個處理數據流簡單、用戶體驗好及入手快的框架,在查了好多框架以後,最終選擇了react-native(簡稱RN).

開始用RN的時候就是從看文檔開始,還有就是但願你們在學習的時候多加一下相關的技術羣,學習起來更加的方便,根據文檔開始進行環境搭建,編寫第一個程序Hello word,一些環境搭建遇到的問題我就不說了,如今說一下在使用react-native-vector-icons的時候的坑,每一個項目都會用到字體圖標,那麼在我用到的時候就遇到了大坑,

控制檯會出現如上圖所示的報錯,解決辦法很以下步驟:

第一步:

1)將(./node_modules/react-native/local-cli/core/__fixtures__/files/package.json)package.json刪掉,
2)在android/app/build.gradle中增長以下腳本
project.ext.vectoricons = [
    iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ]        
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

第二步:

1)在node_modules中找到react-native-venctor-icons庫,將Fonts文件拷貝到android/app/src/main/assets若是沒有assets就新建一個,將Fonts放到assets下便可
2)在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')

第三步:

1)在android/app/build.gradle添加compile project(':react-native-vector-icons')

具體操做以下:

apply plugin: 'com.android.application'

android {
      ...
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+"  
    ....
    compile project(':react-native-vector-icons')
}

第四步:

1)在android/app/src/main/java/包名/MainApplication.java中添加import com.oblador.vectoricons.VectorIconsPackage;new VectorIconsPackage()

具體代碼以下:

package com.myapp;

import com.oblador.vectoricons.VectorIconsPackage;

....

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

}