第一次写文章,也是第一次用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()
    );
  }

}