天天看點

react-native-vector-icons android 字型圖示

前幾天公司android項目,用到了react-native-vector-icons字型圖示庫,用了幾次沒成功,最後一次嘗試,成功了,下面貼出代碼。

我用的是react-native-vector-icons的FontAwesome字型圖示

比較官方的網址是https://fontawesome.com/  友善你檢視全部的文檔

1.修改之處如下:

android/app/build.gradle

project.ext.vectoricons = [
    iconFontNames: [ 'FontAwesome.ttf', 'EvilIcons.ttf' ] // 這裡加上你想要的圖示庫
]

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

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')//加上這個
           

3.修改之處如下:

android/app/build.gradle

dependencies {
  compile fileTree(dir: 'libs', include: ['*.jar'])
  compile "com.android.support:appcompat-v7:23.0.1"
  compile "com.facebook.react:react-native:+"  // From node_modules
  compile project(':react-native-vector-icons')//加入這個代碼
}
           

4.修改之處如下:

MainApplication.java

 ( in 

android/app/src/main/java/...

)

package com.myapp;

  import com.oblador.vectoricons.VectorIconsPackage;//加入這個代碼

....

  @Override
  protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
      new MainReactPackage()
    , new VectorIconsPackage()//加入這個代碼
    );
  }

}
           

繼續閱讀