字體是優(yōu)秀用戶體驗的基石。使用定制字體可以為你的應用程序提供獨特的身份，幫助你的項目在競爭激烈的市場中脫穎而出。

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

向 React Native CLI 項目添加自定義字體

對于我們的項目，我們將研究如何通過構建使用Google字體的基礎應用程序，將自定義字體添加到React Native CLI項目中。Google字體是一個免費的開源字體庫，可在設計網頁和移動應用程序時使用。

要啟動React Native CLI項目，請在終端中運行以下命令：

npx react-native@latest init CustomFontCLI

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

在你喜歡的IDE中打開你的項目以開始。在這個教程中，我們將使用VS Code。

一旦項目已經啟動，我們將繼續(xù)獲取我們想要使用的字體。我們將討論如何導入它們并在我們的項目中使用它們。

下載并將Google字體集成到我們的項目中

在這個項目中，我們將使用兩種字體：QuickSand 和 Raleway，演示自定義字體的集成，你可以在Google字體上找到它們。

在 Google Fonts 中找到你想要的字體，選擇你想要的樣式（例如，Light 300, Regular 400 等），并使用“下載全部”按鈕下載整個字體文件夾：

該文件夾將以ZIP文件的形式下載，其中包含一個字體文件夾。在該文件夾內，有一個靜態(tài)文件夾，所有的TTF文件都在其中。復制并保留這些TTF文件。

在下一部分，我們將會講解如何將這些字體的TTF文件集成到我們的React Native CLI項目中。

將Google字體集成到項目中

在你的項目根目錄中創(chuàng)建一個名為 assets 的文件夾，并在其中創(chuàng)建一個名為 fonts 的子文件夾。然后，將你之前從靜態(tài)文件夾中復制的所有TTF文件粘貼到你的項目的 fonts 文件夾中：

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

將字體鏈接到要在項目文件中使用

我們已經成功地將字體文件集成到我們的項目中?，F在我們需要鏈接它們，這樣我們就能在項目內的任何文件中使用它們。要做到這一點，運行以下命令：

npx react-native-asset

一旦資源成功鏈接，你應該會在終端看到以下消息：

然后，在你的 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,
  },
});

這是一個基本的 App.js 文件，其中四個文本被不同的 Raleway 和 Quicksand 字體樣式所樣式化。本質上，我們正在渲染 JSX 與四個文本以顯示在屏幕上，并使用 React Native 的 StyleSheet API 為每個 Text 組件附加不同的 fontFamily 樣式。

讓我們看看輸出：

在Expo中使用自定義字體的React Native

在這一部分，我們將學習如何在Expo中使用自定義字體。Expo 支持兩種字體格式，OTF 和 TTF，這兩種格式在 iOS、Android 和 Web上都能穩(wěn)定運行。如果你的字體是其他格式，你將需要進行高級配置。

首先，通過運行此命令創(chuàng)建一個新的Expo項目：

npx create-expo-app my-app

一旦項目成功安裝，通過運行 npm run start 啟動開發(fā)服務器，并選擇iOS 或 Android 選項來打開你的項目。

當你的模擬器完成項目加載后，你應該會看到這個：

使用Google字體

因為我們將 Raleway 和 Quicksand 字體添加為我們的自定義字體，我們將安裝這兩個包：

@expo-google-fonts/raleway
@expo-google-fonts/quicksand

如果你有其他想要使用的Google字體，你可以在這里查看Expo支持的可用字體。

在Expo項目中集成自定義的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",
  },
});

在這里，我們從各自的包中導入了 Raleway_200ExtraLight 和 Quicksand_300Light 。 useFonts 鉤子用于異步加載這些自定義字體。 useFonts 鉤子的結果是一個布爾值數組，我們使用 const [fontsLoaded] 語法進行解構，以訪問它返回的布爾值。

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

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

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

使用自定義字體

假設你正在構建一個個人的 React Native 項目，并且你得到了一些自定義字體，這些字體并不在 Expo 支持的 Google 字體庫中。

首先，你需要下載 font 文件到你的項目中，并安裝 expo-font 包。對于這個教程，我從 FontSquirrel 下載了 Source Code Pro 作為我的自定義字體。

創(chuàng)建一個名為 assets 的文件夾，并在其中創(chuàng)建一個 fonts 文件夾，就像你使用React Native CLI所做的那樣。然后，從 fonts 文件夾獲取并復制字體文件到你的機器和你的項目中，如下所示：

在你的 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 文件夾加載字體文件，根據字體是否成功加載，返回 true 或 false 的值。

如果 fontsLoaded 不為真，即 useFonts 鉤子中指定的字體沒有成功加載，我們將返回一個 Loading… 文本。否則，我們渲染應用組件并使用已加載的自定義字體。

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

在React Native中使用自定義字體時常見的陷阱

在React Native中使用自定義字體時，你可能會遇到一些缺點：

• 字體族名稱不匹配：如前文所述，確保字體族名稱一致性至關重要。例如，如果你將一個字體作為 SourceCodePro-ExtraLight.otf 導入，但隨后以不同的路徑或文件名加載到應用程序中，例如 /assets/fonts/SourceCodePro-ExtraLight.ttf，這將導致應用程序拋出錯誤，因為存在 fontFamily 名稱不匹配的情況。
• 使用不受支持的字體格式：在使用自定義字體時，驗證你正在使用的系統(tǒng)（iOS，Android 或網頁）是否支持你正在使用的字體格式（例如，.ttf，.otf）非常重要。如果不支持，可能會在開發(fā)過程中出現意外錯誤。
• 性能影響：在React Native應用程序中添加自定義字體時，請注意它們的文件大小（以kb/mb為單位）。大型字體文件可能會顯著增加應用程序的加載時間，特別是在加載自定義字體時。

總結

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

以上就是在React Native中添加自定義字體的方法詳解的詳細內容，更多關于React Native添加自定義字體的資料請關注腳本之家其它相關文章！

最新評論