字體是優(yōu)秀用戶體驗(yàn)的基石。使用定制字體可以為你的應(yīng)用程序提供獨(dú)特的身份，幫助你的項(xiàng)目在競(jìng)爭(zhēng)激烈的市場(chǎng)中脫穎而出。

在這篇指南中，我們將探索使用 Google Fonts 在 React Native 應(yīng)用中添加自定義字體的方法。要跟上進(jìn)度，你應(yīng)該熟悉 React Native 或 Expo SDK 的基礎(chǔ)知識(shí)，包括 JSX、組件（類和函數(shù)式）和樣式。

向 React Native CLI 項(xiàng)目添加自定義字體

對(duì)于我們的項(xiàng)目，我們將研究如何通過(guò)構(gòu)建使用Google字體的基礎(chǔ)應(yīng)用程序，將自定義字體添加到React Native CLI項(xiàng)目中。Google字體是一個(gè)免費(fèi)的開(kāi)源字體庫(kù)，可在設(shè)計(jì)網(wǎng)頁(yè)和移動(dòng)應(yīng)用程序時(shí)使用。

要啟動(dòng)React Native CLI項(xiàng)目，請(qǐng)?jiān)诮K端中運(yùn)行以下命令：

npx react-native@latest init CustomFontCLI

CustomFontCLI 是我們的項(xiàng)目文件夾的名稱。一旦項(xiàng)目成功安裝，你將會(huì)看到下面的圖片：

在你喜歡的IDE中打開(kāi)你的項(xiàng)目以開(kāi)始。在這個(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文件。

在下一部分，我們將會(huì)講解如何將這些字體的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 文件夾中：

接下來(lái)，在根目錄中創(chuàng)建一個(gè) react-native.config.js 文件，并將下面的代碼粘貼到其中：

將字體鏈接到要在項(xiàng)目文件中使用

我們已經(jīng)成功地將字體文件集成到我們的項(xiàng)目中?，F(xiàn)在我們需要鏈接它們，這樣我們就能在項(xiàng)目?jī)?nèi)的任何文件中使用它們。要做到這一點(diǎn)，運(yùn)行以下命令：

npx react-native-asset

一旦資源成功鏈接，你應(yīng)該會(huì)在終端看到以下消息：

然后，在你的 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)行高級(jí)配置。

首先，通過(guò)運(yùn)行此命令創(chuàng)建一個(gè)新的Expo項(xiàng)目：

npx create-expo-app my-app

一旦項(xiàng)目成功安裝，通過(guò)運(yùn)行 npm run start 啟動(dòng)開(kāi)發(fā)服務(wù)器，并選擇iOS 或 Android 選項(xiàng)來(lái)打開(kāi)你的項(xiàng)目。

當(dāng)你的模擬器完成項(xiàng)目加載后，你應(yīng)該會(huì)看到這個(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] 語(yǔ)法進(jìn)行解構(gòu)，以訪問(wèn)它返回的布爾值。

如果字體成功加載，結(jié)果將是 [true, null] ，這意味著 fontsLoaded 是真的。如果不成功，它將返回 [false, null] 。如果字體還未加載，我們將返回一個(gè) Loading 文本。

如果傳遞給 useFont 鉤子的字體（如上面的代碼塊所示）已經(jīng)加載，那么就渲染應(yīng)用程序，我們指定的字體應(yīng)該會(huì)被使用。

在我們的模擬器中看看這是什么樣子：

使用自定義字體

假設(shè)你正在構(gòu)建一個(gè)個(gè)人的 React Native 項(xiàng)目，并且你得到了一些自定義字體，這些字體并不在 Expo 支持的 Google 字體庫(kù)中。

首先，你需要下載 font 文件到你的項(xiàng)目中，并安裝 expo-font 包。對(duì)于這個(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 鉤子中指定的字體沒(méi)有成功加載，我們將返回一個(gè) Loading… 文本。否則，我們渲染應(yīng)用組件并使用已加載的自定義字體。

如上述模擬器輸出所示，第一段具有 default 樣式的文本使用默認(rèn)的 fontFamily 樣式，而接下來(lái)的兩段文本分別使用了 SourceCodePro-ExtraLight 和 SourceCodePro-Light 字體家族來(lái)設(shè)置文本樣式。

在React Native中使用自定義字體時(shí)常見(jiàn)的陷阱

在React Native中使用自定義字體時(shí)，你可能會(huì)遇到一些缺點(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)頁(yè)）是否支持你正在使用的字體格式（例如，.ttf，.otf）非常重要。如果不支持，可能會(huì)在開(kāi)發(fā)過(guò)程中出現(xiàn)意外錯(cuò)誤。
• 性能影響：在React Native應(yīng)用程序中添加自定義字體時(shí)，請(qǐng)注意它們的文件大小（以kb/mb為單位）。大型字體文件可能會(huì)顯著增加應(yīng)用程序的加載時(shí)間，特別是在加載自定義字體時(shí)。

總結(jié)

如本文所探討的，將自定義字體集成到React Native應(yīng)用程序中不僅僅是技術(shù)上的提升，更是一種改善用戶體驗(yàn)的策略性方法。無(wú)論是使用Expo還是React Native CLI，這個(gè)過(guò)程都將大大提升你的應(yīng)用的美觀度和可用性。

以上就是在React Native中添加自定義字體的方法詳解的詳細(xì)內(nèi)容，更多關(guān)于React Native添加自定義字體的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論