字体是优良用户体验的基石。应用定制字体能够为你的应用程序提供独特的身份，帮忙你的我的项目在竞争强烈的市场中怀才不遇。
在这篇指南中，咱们将摸索应用 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 CustomFontCLICustomFontCLI 是咱们的我的项目文件夹的名称。一旦我的项目胜利装置，你将会看到上面的图片：
在你喜爱的IDE中关上你的我的项目以开始。在这个教程中，咱们将应用VS Code。
一旦我的项目曾经启动，咱们将持续获取咱们想要应用的字体。咱们将探讨如何导入它们并在咱们的我的项目中应用它们。
下载并将Google字体集成到咱们的我的项目中
在这个我的项目中，咱们将应用两种字体：QuickSand 和 Raleway，演示自定义字体的集成，你能够在Google字体上找到它们。
在 Google Fonts 中找到你想要的字体，抉择你想要的款式（例如，Light 300, Regular 400 等），并应用“下载全副”按钮下载整个字体文件夹：
该文件夹将以ZIP文件的模式下载，其中蕴含一个字体文件夹。在该文件夹内，有一个动态文件夹，所有的TTF文件都在其中。复制并保留这些TTF文件。
在下一部分，咱们将会解说如何将这些字体的TTF文件集成到咱们的React Native CLI我的项目中。
将Google字体集成到我的项目中
在你的我的项目根目录中创立一个名为 assets 的文件夹，并在其中创立一个名为 fonts 的子文件夹。而后，将你之前从动态文件夹中复制的所有TTF文件粘贴到你的我的项目的 fonts 文件夹中：
接下来，在根目录中创立一个 react-native.config.js 文件，并将上面的代码粘贴到其中：
将字体链接到要在我的项目文件中应用
咱们曾经胜利地将字体文件集成到咱们的我的项目中。当初咱们须要链接它们，这样咱们就能在我的项目内的任何文件中应用它们。要做到这一点，运行以下命令：
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上都能稳固运行。如果你的字体是其余格局，你将须要进行高级配置。
首先，通过运行此命令创立一个新的Expo我的项目：
npx create-expo-app my-app一旦我的项目胜利装置，通过运行 npm run start 启动开发服务器，并抉择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 作为我的自定义字体。
创立一个名为 assets 的文件夹，并在其中创立一个 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名称不匹配的状况。 - 应用不受反对的字体格局：在应用自定义字体时，验证你正在应用的零碎（iOS，Android 或网页）是否反对你正在应用的字体格局（例如，
.ttf，.otf）十分重要。如果不反对，可能会在开发过程中出现意外谬误。 - 性能影响：在React Native应用程序中增加自定义字体时，请留神它们的文件大小（以kb/mb为单位）。大型字体文件可能会显著减少应用程序的加载工夫，特地是在加载自定义字体时。
总结
如本文所探讨的，将自定义字体集成到React Native应用程序中不仅仅是技术上的晋升，更是一种改善用户体验的策略性办法。无论是应用Expo还是React Native CLI，这个过程都将大大晋升你的利用的好看度和可用性。