版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hxy19971101/article/details/80555317
第一步:在react-native 工程目录下通过npm安装react-native-vector-icons
npm install react-native-vector-icons --save
第二步:分别为android和ios做一些相应的配置
Android:
在android/app/build.gradle
中增加如下脚本:
project.ext.vectoricons = [
iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // Name of the font files you want to copy
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
在node-modules 中找到
react-native-vector-icons库,将Fonts 文件夹拷贝到android/app/src/main/assets/fonts
如果没有assets/fonts 新建即可
在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')
include ':react-native-vector-icons'的作用时在编译android项目的时候
react-native-vector-icons会作为一个module加入编译。
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')是指定
react-native-vector-icons的具体路径
在 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:+" // From node_modules
....
compile project(':react-native-vector-icons')
}
最后一步:在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()
);
}
}
然后在此运行项目即可。
测试代码:
import React, {
Component
} from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
type Props = {};
export default class App extends Component < Props > {
render() {
return (
<View style={styles.container}>
<View >
<Icon name="rocket" size={16} color="red"/>
</View>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit App.js
</Text>
<Text style={styles.instructions}>
{instructions}
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});