如何在React Native中新增自定義字型

發表於2024-02-28
React Native自定義字型

image.png

字型是優秀使用者體驗的基石。使用定製字型可以為你的應用程式提供獨特的身份，幫助你的專案在競爭激烈的市場中脫穎而出。

在這篇指南中，我們將探索使用 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 是我們的專案資料夾的名稱。一旦專案成功安裝，你將會看到下面的圖片：

image.png

在你喜歡的IDE中開啟你的專案以開始。在這個教程中，我們將使用VS Code。

一旦專案已經啟動，我們將繼續獲取我們想要使用的字型。我們將討論如何匯入它們並在我們的專案中使用它們。

下載並將Google字型整合到我們的專案中

在這個專案中，我們將使用兩種字型：QuickSand 和 Raleway，演示自定義字型的整合，你可以在Google字型上找到它們。

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

image.png

該資料夾將以ZIP檔案的形式下載，其中包含一個字型資料夾。在該資料夾內，有一個靜態資料夾，所有的TTF檔案都在其中。複製並保留這些TTF檔案。

在下一部分，我們將會講解如何將這些字型的TTF檔案整合到我們的React Native CLI專案中。

將Google字型整合到專案中

在你的專案根目錄中建立一個名為 assets 的資料夾，並在其中建立一個名為 fonts 的子資料夾。然後，將你之前從靜態資料夾中複製的所有TTF檔案貼上到你的專案的 fonts 資料夾中：

image.png

接下來，在根目錄中建立一個 react-native.config.js 檔案，並將下面的程式碼貼上到其中：

將字型連結到要在專案檔案中使用

我們已經成功地將字型檔案整合到我們的專案中。現在我們需要連結它們，這樣我們就能在專案內的任何檔案中使用它們。要做到這一點，執行以下命令：

npx react-native-asset

一旦資源成功連結，你應該會在終端看到以下訊息：

image.png

然後，在你的 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 樣式。

讓我們看看輸出：

image.png

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

在這一部分，我們將學習如何在Expo中使用自定義字型。Expo 支援兩種字型格式，OTF 和 TTF，這兩種格式在 iOS、Android 和 Web上都能穩定執行。如果你的字型是其他格式，你將需要進行高階配置。

首先，透過執行此命令建立一個新的Expo專案：

npx create-expo-app my-app

一旦專案成功安裝，透過執行 npm run start 啟動開發伺服器，並選擇iOS 或 Android 選項來開啟你的專案。

當你的模擬器完成專案載入後，你應該會看到這個：

image.png

使用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 鉤子的字型（如上面的程式碼塊所示）已經載入，那麼就渲染應用程式，我們指定的字型應該會被使用。

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

image.png

使用自定義字型

假設你正在構建一個個人的 React Native 專案，並且你得到了一些自定義字型，這些字型並不在 Expo 支援的 Google 字型庫中。

首先，你需要下載 font 檔案到你的專案中，並安裝 expo-font 包。對於這個教程，我從 FontSquirrel 下載了 Source Code Pro 作為我的自定義字型。

建立一個名為 assets 的資料夾，並在其中建立一個 fonts 資料夾，就像你使用React Native CLI所做的那樣。然後，從 fonts 資料夾獲取並複製字型檔案到你的機器和你的專案中，如下所示：

image.png

在你的 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… 文字。否則，我們渲染應用元件並使用已載入的自定義字型。

image.png

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

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

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

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

總結

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

相關文章