React Native 中添加自定義字體的方法
在 React Native 中，如何添加自定義字體呢？React Native 提供了便捷的命令行工具來幫助我們。
添加字體
在項(xiàng)目根目錄下創(chuàng)建 assets/fonts 文件夾，把字體文件放到這個文件夾下。
如圖：
定義 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 命令，
對于 Android 來說，這個命令做了如下事情：
將字體文件拷貝到 android/app/src/main/assets/fonts 目錄下，如圖
對于 iOS 來說，這個命令做了如下事情：
創(chuàng)建 Resources 文件夾，并將字體文件 link 到該文件夾下，如圖
注意 iOS 并沒有拷貝字體文件，而是通過相對路徑指向了字體文件所在。
iOS 所做的另外一件事情便是修改 Info.plist 文件，添加了字體配置
<key>UIAppFonts</key> <array> <string>DFWaWaSC-W5.otf</string> </array>
當(dāng)明白了 npx react-native link 所做的事情后，我們也可以通過手動的方式添加字體。
在樣式中使用字體
在樣式表中，使用 fontFamily 屬性來指定字體。
const styles = StyleSheet.create({
text: {
backgroundColor: 'transparent',
fontSize: 17,
fontFamily: 'DFWaWaSC-W5',
textAlign: 'center',
margin: 8,
},
})
示例
這里有一個示例，供你參考。
也可以參考這篇文章，講得比本文要好。
到此這篇關(guān)于如何在 React Native 中添加自定義字體的文章就介紹到這了,更多相關(guān)React Native自定義字體內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
react antd如何防止一份數(shù)據(jù)多次提交
這篇文章主要介紹了react antd如何防止一份數(shù)據(jù)多次提交問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
React Agent 自定義實(shí)現(xiàn)代碼
在使用langchain的ReactAgent遇到問題后,作者嘗試自定義ReactAgent實(shí)現(xiàn),通過詳細(xì)分析langchain中的agent功能和問題,結(jié)合React思想,作者設(shè)計(jì)了新的agent邏輯并在GitHub上分享了代碼,新的ReactAgent通過改進(jìn)prompt和工具調(diào)用邏輯,提升了任務(wù)執(zhí)行的效果和穩(wěn)定性2024-10-10
Hooks 是一種函數(shù)，該函數(shù)允許您從函數(shù)式組件 “勾住(hook into)” React 狀態(tài)和生命周期功能。 Hooks 在類內(nèi)部不起作用 - 它們允許你無需類就使用 React，本文帶領(lǐng)大家學(xué)習(xí)React 小技巧教你如何擺脫hooks依賴煩惱，感興趣的朋友一起看看吧2021-05-05
JavaScript?和?React?提供了靈活的事件處理機(jī)制,特別是通過利用事件的捕獲階段來阻止事件傳播可以實(shí)現(xiàn)精細(xì)的權(quán)限控制,本文將詳細(xì)介紹這一技術(shù)的應(yīng)用,并通過實(shí)踐案例展示如何封裝和使用一個?React?鑒權(quán)組件,需要的可以參考下2024-03-03
react項(xiàng)目中使用react-dnd實(shí)現(xiàn)列表的拖拽排序功能
這篇文章主要介紹了react項(xiàng)目中使用react-dnd實(shí)現(xiàn)列表的拖拽排序,本文結(jié)合實(shí)例代碼講解react-dnd是如何實(shí)現(xiàn)，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-02-02
ReactNative中使用Redux架構(gòu)總結(jié)
本篇文章主要介紹了ReactNative中使用Redux架構(gòu)總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
最近在處理項(xiàng)目代碼的時候,出現(xiàn)了一個bug,組件中的方法在組件卸載后仍然在執(zhí)行,代碼片段發(fā)給我看,但是變量的用意我也不懂,只看到有方法調(diào)用自身方法,這不就是遞歸嘛,所以本文詳細(xì)給大家介紹了React組件卸載怎么中止遞歸方法,需要的朋友可以參考下2024-01-01
我們知道，在React中沒有像Vue那種數(shù)據(jù)雙向綁定的效果。而this.setState方法就是用來對數(shù)據(jù)進(jìn)行更改的。而通過this.setState方法更改的數(shù)據(jù)，會讓組件的render重新渲染，并且刷新數(shù)據(jù)2022-09-09
這篇文章主要介紹了React中遍歷數(shù)組生成標(biāo)簽問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
當(dāng)我們使用React編寫組件時,組件的重新渲染是一個重要的概念,本文主要介紹了React組件在什么情況下會重新渲染,具有一定的參考價值,感興趣的可以了解一下2023-12-12