首先安装组件 react-native-vector-icons
yarn add react-native-vector-icons
Android端配置
编辑 android/app/build.gradle 文件，在顶部添加以下代码使安卓字体图标生效
project.ext.vectoricons = [
iconFontNames: ['FontAwesome.ttf']
]
apply from: '../../node_modules/react-native-vector-icons/fonts.gradle'
IOS端配置
在 info.plist 文件中将 FontAwesome.ttf 文件加入
image.png
打开 FontAwesome官网 ，寻找合适的图标并复制名称
编写代码将图标引入
import React from 'react';
import {Text, StyleSheet, View, Dimensions} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
export default class Home extends React.Component {
render() {
return (
<View style={styles.content}>
<Text>首页</Text>
<Icon style={{fontSize: 50}} name={'apple'} />
</View>
);
}
}
const styles = StyleSheet.create({
content: {
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
},
});
在 ios 目录下执行 pod install 并重启项目，就能看到效果了
image.png
