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

解決方法：
刪除下方截圖內的所有內容：