react native字体图标react-native-vector-icons的使用

GitHub地址：https://github.com/oblador/react-native-vector-icons

图标参考地址：https://oblador.github.io/react-native-vector-icons/

一、下载和引用

yarn add react-native-vector-icons
# RN >= 0.60
npx pod-install

# RN < 0.60
react-native link react-native-vector-icons

二、引入字体图标
1.在Xcode项目中创建一个新的字体组取名为Fonts，选择创建分组


2.将要在项目中使用的字体文件（./node_modules/react-native-vector-icons/Fonts/*.ttf）拖到刚创建的Fonts组中。

3.打开项目中的Info.plist文件，添加字体

4.确认Build Phases下有如下内容，如果没有，手动添加

5.引用方法

//引入
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

//应用
 <MaterialIcons  name={'home'} size={26} color=”#ff0000“/>
 

三、引入自定义图标
1.生成图标：参考网站
2.下载压缩包后，将文件config.json拷贝到项目中
3. 同上面配置过程一样，将压缩包里的ttf文件拖入到项目中Fonts文件夹中，并且在info.plist 中配置
4. 使用方法：参考官网

四、设计问题修复

提示报错：

error: Multiple commands produce '/Users/admin/Library/Developer/Xcode/DerivedData/BaseApp-bhympysnnfxockaxotvbiyodkfov/Build/Products/Debug-iphonesimulator/BaseApp.app/Entypo.ttf

解决方法：
删除下方截图内的所有内容：