reactnativevectoricons运用碰到的大坑

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