React-Native使用FontAwesome图标字体

首先安装组件 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