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