在React Native中添加自定義字體的方法詳解
字體是優(yōu)秀用戶體驗(yàn)的基石。使用定制字體可以為你的應(yīng)用程序提供獨(dú)特的身份，幫助你的項(xiàng)目在競爭激烈的市場中脫穎而出。
在這篇指南中，我們將探索使用 Google Fonts 在 React Native 應(yīng)用中添加自定義字體的方法。要跟上進(jìn)度，你應(yīng)該熟悉 React Native 或 Expo SDK 的基礎(chǔ)知識，包括 JSX、組件（類和函數(shù)式）和樣式。
向 React Native CLI 項(xiàng)目添加自定義字體
對于我們的項(xiàng)目，我們將研究如何通過構(gòu)建使用Google字體的基礎(chǔ)應(yīng)用程序，將自定義字體添加到React Native CLI項(xiàng)目中。Google字體是一個(gè)免費(fèi)的開源字體庫，可在設(shè)計(jì)網(wǎng)頁和移動(dòng)應(yīng)用程序時(shí)使用。
要啟動(dòng)React Native CLI項(xiàng)目，請?jiān)诮K端中運(yùn)行以下命令：
npx react-native@latest init CustomFontCLI
CustomFontCLI 是我們的項(xiàng)目文件夾的名稱。一旦項(xiàng)目成功安裝，你將會看到下面的圖片：
在你喜歡的IDE中打開你的項(xiàng)目以開始。在這個(gè)教程中，我們將使用VS Code。
一旦項(xiàng)目已經(jīng)啟動(dòng)，我們將繼續(xù)獲取我們想要使用的字體。我們將討論如何導(dǎo)入它們并在我們的項(xiàng)目中使用它們。
下載并將Google字體集成到我們的項(xiàng)目中
在這個(gè)項(xiàng)目中，我們將使用兩種字體：QuickSand 和 Raleway，演示自定義字體的集成，你可以在Google字體上找到它們。
在 Google Fonts 中找到你想要的字體，選擇你想要的樣式（例如，Light 300, Regular 400 等），并使用“下載全部”按鈕下載整個(gè)字體文件夾：
該文件夾將以ZIP文件的形式下載，其中包含一個(gè)字體文件夾。在該文件夾內(nèi)，有一個(gè)靜態(tài)文件夾，所有的TTF文件都在其中。復(fù)制并保留這些TTF文件。
在下一部分，我們將會講解如何將這些字體的TTF文件集成到我們的React Native CLI項(xiàng)目中。
將Google字體集成到項(xiàng)目中
在你的項(xiàng)目根目錄中創(chuàng)建一個(gè)名為 assets 的文件夾，并在其中創(chuàng)建一個(gè)名為 fonts 的子文件夾。然后，將你之前從靜態(tài)文件夾中復(fù)制的所有TTF文件粘貼到你的項(xiàng)目的 fonts 文件夾中：
接下來，在根目錄中創(chuàng)建一個(gè) react-native.config.js 文件，并將下面的代碼粘貼到其中：
將字體鏈接到要在項(xiàng)目文件中使用
我們已經(jīng)成功地將字體文件集成到我們的項(xiàng)目中。現(xiàn)在我們需要鏈接它們，這樣我們就能在項(xiàng)目內(nèi)的任何文件中使用它們。要做到這一點(diǎn)，運(yùn)行以下命令：
npx react-native-asset
一旦資源成功鏈接，你應(yīng)該會在終端看到以下消息：
然后，在你的 App.js 文件中，粘貼以下代碼：
import {StyleSheet, Text, View} from 'react-native';
import React from 'react';
const App = () => {
return (
<View style={styles.container}>
<Text style={styles.quicksandRegular}>
This text uses a quick sand font
</Text>
<Text style={styles.quicksandLight}>
This text uses a quick sand light font
</Text>
<Text style={styles.ralewayThin}>
This text uses a thin italic raleway font
</Text>
<Text style={styles.ralewayItalic}>
This text uses a thin italic raleway font
</Text>
</View>
);
};
export default App;
const styles = StyleSheet.create({
container: {
backgroundColor: 'lavender',
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
quicksandLight: {
fontFamily: 'Quicksand-Light',
fontSize: 20,
},
quicksandRegular: {
fontFamily: 'Quicksand-Regular',
fontSize: 20,
},
ralewayItalic: {
fontFamily: 'Raleway-Italic',
fontSize: 20,
},
ralewayThin: {
fontFamily: 'Raleway-ThinItalic',
fontSize: 20,
},
});
這是一個(gè)基本的 App.js 文件，其中四個(gè)文本被不同的 Raleway 和 Quicksand 字體樣式所樣式化。本質(zhì)上，我們正在渲染 JSX 與四個(gè)文本以顯示在屏幕上，并使用 React Native 的 StyleSheet API 為每個(gè) Text 組件附加不同的 fontFamily 樣式。
讓我們看看輸出：
在Expo中使用自定義字體的React Native
在這一部分，我們將學(xué)習(xí)如何在Expo中使用自定義字體。Expo 支持兩種字體格式，OTF 和 TTF，這兩種格式在 iOS、Android 和 Web上都能穩(wěn)定運(yùn)行。如果你的字體是其他格式，你將需要進(jìn)行高級配置。
首先，通過運(yùn)行此命令創(chuàng)建一個(gè)新的Expo項(xiàng)目：
npx create-expo-app my-app
一旦項(xiàng)目成功安裝，通過運(yùn)行 npm run start 啟動(dòng)開發(fā)服務(wù)器，并選擇iOS 或 Android 選項(xiàng)來打開你的項(xiàng)目。
當(dāng)你的模擬器完成項(xiàng)目加載后，你應(yīng)該會看到這個(gè)：
使用Google字體
因?yàn)槲覀儗?nbsp;Raleway 和 Quicksand 字體添加為我們的自定義字體，我們將安裝這兩個(gè)包：
@expo-google-fonts/raleway @expo-google-fonts/quicksand
如果你有其他想要使用的Google字體，你可以在這里查看Expo支持的可用字體。
在Expo項(xiàng)目中集成自定義的Google字體
在你的 App.js 文件中，粘貼以下代碼塊：
import { Raleway_200ExtraLight } from "@expo-google-fonts/raleway";
import { Quicksand_300Light } from "@expo-google-fonts/quicksand";
import { useFonts } from "expo-font";
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
export default function App() {
const [fontsLoaded] = useFonts({
Raleway_200ExtraLight,
Quicksand_300Light,
});
if (!fontsLoaded) {
return <Text>Loading...</Text>;
}
return (
<View style={styles.container}>
<Text>This text has default style</Text>
<Text style={styles.raleway}>This text uses Raleway Font</Text>
<Text style={styles.quicksand}>This text uses QuickSand Font</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
raleway: {
fontSize: 20,
fontFamily: "Raleway_200ExtraLight",
},
quicksand: {
fontSize: 20,
fontFamily: "Quicksand_300Light",
},
});
在這里，我們從各自的包中導(dǎo)入了 Raleway_200ExtraLight 和 Quicksand_300Light 。 useFonts 鉤子用于異步加載這些自定義字體。 useFonts 鉤子的結(jié)果是一個(gè)布爾值數(shù)組，我們使用 const [fontsLoaded] 語法進(jìn)行解構(gòu)，以訪問它返回的布爾值。
如果字體成功加載，結(jié)果將是 [true, null] ，這意味著 fontsLoaded 是真的。如果不成功，它將返回 [false, null] 。如果字體還未加載，我們將返回一個(gè) Loading 文本。
如果傳遞給 useFont 鉤子的字體（如上面的代碼塊所示）已經(jīng)加載，那么就渲染應(yīng)用程序，我們指定的字體應(yīng)該會被使用。
在我們的模擬器中看看這是什么樣子：
使用自定義字體
假設(shè)你正在構(gòu)建一個(gè)個(gè)人的 React Native 項(xiàng)目，并且你得到了一些自定義字體，這些字體并不在 Expo 支持的 Google 字體庫中。
首先，你需要下載 font 文件到你的項(xiàng)目中，并安裝 expo-font 包。對于這個(gè)教程，我從 FontSquirrel 下載了 Source Code Pro 作為我的自定義字體。
創(chuàng)建一個(gè)名為 assets 的文件夾，并在其中創(chuàng)建一個(gè) fonts 文件夾，就像你使用React Native CLI所做的那樣。然后，從 fonts 文件夾獲取并復(fù)制字體文件到你的機(jī)器和你的項(xiàng)目中，如下所示：
在你的 App.js 文件中，粘貼以下代碼：
import { useFonts } from "expo-font";
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
export default function App() {
const [fontsLoaded] = useFonts({
"SourceCodePro-ExtraLight": require("./assets/fonts/SourceCodePro-ExtraLight.otf"),
"SourceCodePro-LightIt": require("./assets/fonts/SourceCodePro-LightIt.otf"),
});
if (!fontsLoaded) {
return <Text>Loading...</Text>;
}
return (
<View style={styles.container}>
<Text style={styles.default}>This text has default style</Text>
<Text style={styles.sourcepro}>This text uses Source Pro Font</Text>
<Text style={styles.sourceprolight}>This text uses Source Pro Font</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
default: {
fontSize: 20,
},
sourcepro: {
fontSize: 20,
fontFamily: "SourceCodePro-ExtraLight",
},
sourceprolight: {
fontSize: 20,
fontFamily: "SourceCodePro-LightIt",
},
});
就像集成 Google 字體一樣， useFonts 鉤子用于從 font 文件夾加載字體文件，根據(jù)字體是否成功加載，返回 true 或 false 的值。
如果 fontsLoaded 不為真，即 useFonts 鉤子中指定的字體沒有成功加載，我們將返回一個(gè) Loading… 文本。否則，我們渲染應(yīng)用組件并使用已加載的自定義字體。
如上述模擬器輸出所示，第一段具有 default 樣式的文本使用默認(rèn)的 fontFamily 樣式，而接下來的兩段文本分別使用了 SourceCodePro-ExtraLight 和 SourceCodePro-Light 字體家族來設(shè)置文本樣式。
在React Native中使用自定義字體時(shí)常見的陷阱
在React Native中使用自定義字體時(shí)，你可能會遇到一些缺點(diǎn)：
- 字體族名稱不匹配：如前文所述，確保字體族名稱一致性至關(guān)重要。例如，如果你將一個(gè)字體作為
SourceCodePro-ExtraLight.otf導(dǎo)入，但隨后以不同的路徑或文件名加載到應(yīng)用程序中，例如/assets/fonts/SourceCodePro-ExtraLight.ttf，這將導(dǎo)致應(yīng)用程序拋出錯(cuò)誤，因?yàn)榇嬖?fontFamily名稱不匹配的情況。 - 使用不受支持的字體格式：在使用自定義字體時(shí)，驗(yàn)證你正在使用的系統(tǒng)（iOS，Android 或網(wǎng)頁）是否支持你正在使用的字體格式（例如，
.ttf，.otf）非常重要。如果不支持，可能會在開發(fā)過程中出現(xiàn)意外錯(cuò)誤。 - 性能影響：在React Native應(yīng)用程序中添加自定義字體時(shí)，請注意它們的文件大?。ㄒ詋b/mb為單位）。大型字體文件可能會顯著增加應(yīng)用程序的加載時(shí)間，特別是在加載自定義字體時(shí)。
總結(jié)
如本文所探討的，將自定義字體集成到React Native應(yīng)用程序中不僅僅是技術(shù)上的提升，更是一種改善用戶體驗(yàn)的策略性方法。無論是使用Expo還是React Native CLI，這個(gè)過程都將大大提升你的應(yīng)用的美觀度和可用性。
以上就是在React Native中添加自定義字體的方法詳解的詳細(xì)內(nèi)容，更多關(guān)于React Native添加自定義字體的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
React實(shí)現(xiàn)動(dòng)態(tài)輪播圖的使用示例
輪播組件是常見的一種方式,用來展示圖像、信息或者是廣告,本文就來介紹一下React實(shí)現(xiàn)動(dòng)態(tài)輪播圖的使用示例,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12
一文帶你掌握React類式組件中setState的應(yīng)用
這篇文章主要為大家詳細(xì)介紹了介紹了React類式組件中setState的三種寫法以及簡單討論下setState?到底是同步的還是異步的,感興趣的可以了解下2024-02-02
React實(shí)現(xiàn)生成和導(dǎo)出Word文檔的方法詳解
React是一個(gè)流行的JavaScript庫,用于構(gòu)建現(xiàn)代前端應(yīng)用程序,本文將深入探討如何在React中生成和導(dǎo)出Word文檔,感興趣的小伙伴可以學(xué)習(xí)一下2023-09-09
解決React報(bào)錯(cuò)Property value does not exist&n
這篇文章主要為大家介紹了React報(bào)錯(cuò)Property value does not exist on type HTMLElement解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
在?React?中如何從狀態(tài)數(shù)組中刪除一個(gè)元素
這篇文章主要介紹了在?React?中從狀態(tài)數(shù)組中刪除一個(gè)元素,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
React新擴(kuò)展函數(shù)setState與lazyLoad及hook介紹
這篇文章主要介紹了React新擴(kuò)展函數(shù)setState與lazyLoad及hook，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-12-12
react?umi?刷新或關(guān)閉瀏覽器時(shí)清除localStorage方式
這篇文章主要介紹了react?umi?刷新或關(guān)閉瀏覽器時(shí)清除localStorage方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
詳解react的兩種動(dòng)態(tài)改變css樣式的方法
這篇文章主要介紹了詳解react的兩種動(dòng)態(tài)改變css樣式的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要介紹了react如何獲取state的值并更新使用，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
React配置Redux并結(jié)合本地存儲設(shè)置token方式
這篇文章主要介紹了React配置Redux并結(jié)合本地存儲設(shè)置token方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01