react-native-vector-icons 安裝、使用-有解無憂

前言

任何庫的安裝與使用都離不開官文，按照官方檔案一步步操作可以規避大多數問題，不過很多庫只有英文檔案，想要完全參透需要時間，react-native-vector-icons 是最近學習React Native時所用到的一個圖示庫，這個庫自帶了十多種圖示庫，也可以將自定義圖示稍作處理后在RN中使用，期間遇到了不少問題，尤其是解決IOS出現的error花了我不少時間，瘋狂百度后發現其實操作很簡單，

先上Github地址，有能力的可先看看：https://github.com/oblador/react-native-vector-icons

使用內置的圖示庫

先安裝包 npm i react-native-vector-icons -D
專案中引入 import FontAwesome from 'react-native-vector-icons/FontAwesome'
使用 <FontAwesome name="home" size={26} />
在這里可以查看react-native-vector-icons中自帶的圖示庫以及庫中對應圖示的name：https://oblador.github.io/react-native-vector-icons/

使用自定義圖示（如阿里媽媽）

使用阿里媽媽圖示庫生成.ttf檔案
將.ttf檔案加入 node_modules/react-native-vector-icons/Fonts中
隨便復制一份字體名.js 檔案并改成自己要引入的，這個js檔案可以就放在react-native-vector-icons包中，也可以從node_modules中拿出來放入專案里
然后跟使用內置庫一樣使用 import XXX from 'react-native-vector-icons/XXX.js' <XXX name="wechat" size={26} />

import createIconSet from './lib/create-icon-set';

const glyphMap = {
    'wechat': 59001, //&#xe625;中的 e625轉成十進制
}

const iconSet = createIconSet(glyphMap, 'iconfont', 'iconfont.ttf');

export default iconSet;

export const Button = iconSet.Button;
export const TabBarItem = iconSet.TabBarItem;
export const TabBarItemIOS = iconSet.TabBarItemIOS;
export const ToolbarAndroid = iconSet.ToolbarAndroid;
export const getImageSource = iconSet.getImageSource;

Android 無法正常顯示圖示

在 android/app/build.gradle 下加入

project.ext.vectoricons = [
    iconFontNames: [ 'FontAwesome.ttf'] // Name of the font files you want to copy
]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
//或者直接引入全部
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

IOS報錯 unRecognized font family 'FontAwesome'

使用Xcode打開專案下的ios檔案夾或者 XXX.xcodeproj 檔案（XXX為專案名）
打開之后目錄中會有一個與專案名稱同名的檔案夾，右鍵單擊這個檔案夾，選擇 Add files to XXX，加入要使用的.ttf檔案或者是 react-native-vector-icons下的整個Fonts檔案夾，記得勾選上 Create floders 中的 create group 和 Add to targets 中的 XXX，
編輯與專案名同名的檔案夾下的 info.plist，并加入行 Fonts provided by application，在該行中加入字體檔案名
注意，每個被add的.ttf檔案都要在 Fonts provided by application 中加入，當add的是整個Fonts檔案夾時，檔案夾中所有.ttf檔案都要在Fonts provided by application 中加入，否則會出現 We ran "xcodebuild" command but it exited with error code 65. 這樣的錯誤
注意，ios的font-family要求與字體檔案字體名相同（不是檔案名）比如從阿里媽媽下載的檔案字體名是 iconfont，那么在XXX.js中就要使用iconfont

const iconSet = createIconSet(glyphMap, 'iconfont', 'MyIcon.ttf'); //阿里媽媽的圖示font-family為iconfont

主要參考資料

https://blog.csdn.net/weixin_38713540/article/details/71474462
https://blog.csdn.net/jiangcs520/article/details/69366245
https://blog.csdn.net/Ruffaim/article/details/80049291

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/158908.html

標籤：JavaScript

上一篇：JS-陣列常用方法整理

下一篇：vue基礎用法