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

buildupchao 發(fā)布于2019-08-26 11:32 / 3229人閱讀

摘要：第一次寫文章也是第一次用有需要改正的地方希望大家多多指點(diǎn)由于公司業(yè)務(wù)以及需求的擴(kuò)大用寫已經(jīng)滿足不了當(dāng)前的需求急需一個(gè)處理數(shù)據(jù)流簡單用戶體驗(yàn)好及入手快的框架在查了好多框架之后最終選擇了簡稱開始用的時(shí)候就是從看文檔開始還有就是希望大家在學(xué)習(xí)

第一次寫文章,也是第一次用react-native,有需要改正的地方希望大家多多指點(diǎn).由于公司業(yè)務(wù)以及需求的擴(kuò)大,用JQ寫App已經(jīng)滿足不了當(dāng)前的需求,急需一個(gè)處理數(shù)據(jù)流簡單、用戶體驗(yàn)好及入手快的框架,在查了好多框架之后,最終選擇了react-native(簡稱RN).

開始用RN的時(shí)候就是從看文檔開始,還有就是希望大家在學(xué)習(xí)的時(shí)候多加一下相關(guān)的技術(shù)群,學(xué)習(xí)起來更加的方便,根據(jù)文檔開始進(jìn)行環(huán)境搭建,編寫第一個(gè)程序Hello word,一些環(huán)境搭建遇到的問題我就不說了,現(xiàn)在說一下在使用react-native-vector-icons的時(shí)候的坑,每個(gè)項(xiàng)目都會(huì)用到字體圖標(biāo),那么在我用到的時(shí)候就遇到了大坑,

控制臺會(huì)出現(xiàn)如上圖所示的報(bào)錯(cuò),解決辦法很如下步驟:

第一步:

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就新建一個(gè),將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()
    );
  }

}