React Native 中添加自定義字體的方法
在 React Native 中，如何添加自定義字體呢？React Native 提供了便捷的命令行工具來幫助我們。
添加字體
在項(xiàng)目根目錄下創(chuàng)建 assets/fonts 文件夾，把字體文件放到這個(gè)文件夾下。
如圖：
定義 assets 目錄
在項(xiàng)目根目錄下創(chuàng)建 react-native.config.js 文件，編輯其中內(nèi)容，留意第 6 行，這和我們自定義字體文件所在目錄一致。
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./assets/fonts/'],
}執(zhí)行 link 命令
執(zhí)行 npx react-native link 命令，
對(duì)于 Android 來說，這個(gè)命令做了如下事情：
將字體文件拷貝到 android/app/src/main/assets/fonts 目錄下，如圖
對(duì)于 iOS 來說，這個(gè)命令做了如下事情：
創(chuàng)建 Resources 文件夾，并將字體文件 link 到該文件夾下，如圖
注意 iOS 并沒有拷貝字體文件，而是通過相對(duì)路徑指向了字體文件所在。
iOS 所做的另外一件事情便是修改 Info.plist 文件，添加了字體配置
<key>UIAppFonts</key> <array> <string>DFWaWaSC-W5.otf</string> </array>
當(dāng)明白了 npx react-native link 所做的事情后，我們也可以通過手動(dòng)的方式添加字體。
在樣式中使用字體
在樣式表中，使用 fontFamily 屬性來指定字體。
const styles = StyleSheet.create({
text: {
backgroundColor: 'transparent',
fontSize: 17,
fontFamily: 'DFWaWaSC-W5',
textAlign: 'center',
margin: 8,
},
})
示例
這里有一個(gè)示例，供你參考。
也可以參考這篇文章，講得比本文要好。
到此這篇關(guān)于如何在 React Native 中添加自定義字體的文章就介紹到這了,更多相關(guān)React Native自定義字體內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
從零搭建react+ts組件庫(封裝antd)的詳細(xì)過程
這篇文章主要介紹了從零搭建react+ts組件庫（封裝antd）,實(shí)際上，代碼開發(fā)過程中，還有很多可以輔助開發(fā)的模塊、流程，本文所搭建的整個(gè)項(xiàng)目，我都按照文章一步一步進(jìn)行了git提交，開發(fā)小伙伴可以邊閱讀文章邊對(duì)照git提交一步一步來看2022-05-05
這篇文章主要為大家介紹了useEffect支持async及await的使用方式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
React jsx轉(zhuǎn)換與createElement使用超詳細(xì)講解
這篇文章主要介紹了React jsx轉(zhuǎn)換與createElement使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-11-11
react-native DatePicker日期選擇組件的實(shí)現(xiàn)代碼
本篇文章主要介紹了react-native DatePicker日期選擇組件的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，有興趣的可以了解下2017-09-09
JS中使用react-tooltip插件實(shí)現(xiàn)鼠標(biāo)懸浮顯示框
前段時(shí)間遇到的一個(gè)需求,要求鼠標(biāo)懸停顯示使用描述, 用到了react-tooltip插件,今天寫一個(gè)總結(jié)，感興趣的朋友跟隨小編一起看看吧2019-05-05
React 項(xiàng)目中動(dòng)態(tài)設(shè)置環(huán)境變量
本文主要介紹了React 項(xiàng)目中動(dòng)態(tài)設(shè)置環(huán)境變量，本文將介紹兩種常用的方法，使用 dotenv 庫和通過命令行參數(shù)傳遞環(huán)境變量，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
詳解基于React.js和Node.js的SSR實(shí)現(xiàn)方案
這篇文章主要介紹了詳解基于React.js和Node.js的SSR實(shí)現(xiàn)方案,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
react實(shí)現(xiàn)Radio組件的示例代碼
這篇文章主要介紹了react實(shí)現(xiàn)Radio組件的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要介紹了解決react組件渲染兩次的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
useEffect是React中的一個(gè)鉤子函數(shù),用于處理副作用操作,這篇文章主要為大家介紹了React中useEffect函數(shù)的具體用法,希望對(duì)大家有所幫助2023-08-08