前言
这里使用插件react-native-vector-icons
一、安装
npm install --save react-native-vector-icons 复制代码
或
yarn add react-native-vector-icons 复制代码
二、IOS环境运行调试
2-1、安装
安装完包之后，需要先执行以下命令：
cd ios && pod install && cd .. 复制代码
然后再启动模拟器运行调试：
yarn ios 复制代码
此时我就出现了下列的报错问题：
网络异常，图片无法展示
|
此时，就需要在xcode里关联fonts文件。
2-2、在ios文件夹下复制一份fonts文件
在ios文件夹下新建fonts文件，将**node_modules/react-native-vector-icons/Fonts文件夹下的ttf文件全部复制到这个ios/fonts文件夹下：
网络异常，图片无法展示
|
2-3、在Xcode中添加fonts文件
先用Xcode工具打开项目（也就是用Xcode打开YourProject -> ios -> YourProject.xcworkspace这个文件），然后选中根文件夹后右击，选择“add files to ‘Project’”：
网络异常，图片无法展示
|
然后选择我们上一步骤新建的fonts文件，注意，选择Create folder referrences:
网络异常，图片无法展示
|
然后再次选择我们的项目，按下图所示进行操作，将所有的ttf文件添加进去。添加完成之后进行重新编译。编译成功之后就没有上面的错误了。
网络异常，图片无法展示
|
三、安卓环境运行调试
在**android/app/src/main**文件夹下新建assets/fonts文件夹，将**node_modules/react-native-vector-icons/Fonts**文件夹下的所有ttf文件复制复制一份到这个新建的文件夹下：
网络异常，图片无法展示
|
相关链接
Example to Use React Native Vector Icons
然后重新执行运行命令，即可。
