在React Native中添加自定义字体的方法详解

男人狗狗

字体是优秀用户体验的基石。使用定制字体可以为你的应用程序提供独特的身份，帮助你的项目在竞争激烈的市场中脱颖而出。
在这篇指南中，我们将探索使用 Google Fonts 在 React Native 应用中添加自定义字体的方法。要跟上进度，你应该熟悉 React Native 或 Expo SDK 的基础知识，包括 JSX、组件（类和函数式）和样式。

向 React Native CLI 项目添加自定义字体

对于我们的项目，我们将研究如何通过构建使用Google字体的基础应用程序，将自定义字体添加到React Native CLI项目中。Google字体是一个免费的开源字体库，可在设计网页和移动应用程序时使用。
要启动React Native CLI项目，请在终端中运行以下命令：

1. npx react-native@latest init CustomFontCLI

复制代码

CustomFontCLI 是我们的项目文件夹的名称。一旦项目成功安装，你将会看到下面的图片：

在你喜欢的IDE中打开你的项目以开始。在这个教程中，我们将使用VS Code。
一旦项目已经启动，我们将继续获取我们想要使用的字体。我们将讨论如何导入它们并在我们的项目中使用它们。

下载并将Google字体集成到我们的项目中

在这个项目中，我们将使用两种字体：QuickSand 和 Raleway，演示自定义字体的集成，你可以在Google字体上找到它们。
在 Google Fonts 中找到你想要的字体，选择你想要的样式（例如，Light 300, Regular 400 等），并使用“下载全部”按钮下载整个字体文件夹：

该文件夹将以ZIP文件的形式下载，其中包含一个字体文件夹。在该文件夹内，有一个静态文件夹，所有的TTF文件都在其中。复制并保留这些TTF文件。
在下一部分，我们将会讲解如何将这些字体的TTF文件集成到我们的React Native CLI项目中。

将Google字体集成到项目中

在你的项目根目录中创建一个名为

1. assets

复制代码

的文件夹，并在其中创建一个名为

1. fonts

复制代码

的子文件夹。然后，将你之前从静态文件夹中复制的所有TTF文件粘贴到你的项目的

1. fonts

复制代码

文件夹中：

接下来，在根目录中创建一个

1. react-native.config.js

复制代码

文件，并将下面的代码粘贴到其中：

将字体链接到要在项目文件中使用

我们已经成功地将字体文件集成到我们的项目中。现在我们需要链接它们，这样我们就能在项目内的任何文件中使用它们。要做到这一点，运行以下命令：

1. npx react-native-asset

复制代码

一旦资源成功链接，你应该会在终端看到以下消息：

然后，在你的

1. App.js

复制代码

文件中，粘贴以下代码：

1. import {StyleSheet, Text, View} from 'react-native';
   
2. import React from 'react';
   
3. const App = () => {
   
4.   return (
   
5.     <View style={styles.container}>
   
6.       <Text style={styles.quicksandRegular}>
   
7.         This text uses a quick sand font
   
8.       </Text>
   
9.       <Text style={styles.quicksandLight}>
   
10.         This text uses a quick sand light font
    
11.       </Text>
    
12.       <Text style={styles.ralewayThin}>
    
13.         This text uses a thin italic raleway font
    
14.       </Text>
    
15.       <Text style={styles.ralewayItalic}>
    
16.         This text uses a thin italic raleway font
    
17.       </Text>
    
18.     </View>
    
19.   );
    
20. };
    
21. export default App;
    
22. const styles = StyleSheet.create({
    
23.   container: {
    
24.     backgroundColor: 'lavender',
    
25.     flex: 1,
    
26.     justifyContent: 'center',
    
27.     alignItems: 'center',
    
28.   },
    
29.   quicksandLight: {
    
30.     fontFamily: 'Quicksand-Light',
    
31.     fontSize: 20,
    
32.   },
    
33.   quicksandRegular: {
    
34.     fontFamily: 'Quicksand-Regular',
    
35.     fontSize: 20,
    
36.   },
    
37.   ralewayItalic: {
    
38.     fontFamily: 'Raleway-Italic',
    
39.     fontSize: 20,
    
40.   },
    
41.   ralewayThin: {
    
42.     fontFamily: 'Raleway-ThinItalic',
    
43.     fontSize: 20,
    
44.   },
    
45. });

复制代码

这是一个基本的

1. App.js

复制代码

文件，其中四个文本被不同的

1. Raleway

复制代码

和

1. Quicksand

复制代码

字体样式所样式化。本质上，我们正在渲染 JSX 与四个文本以显示在屏幕上，并使用 React Native 的 StyleSheet API 为每个

1. Text

复制代码

组件附加不同的

1. fontFamily

复制代码

样式。
让我们看看输出：

在Expo中使用自定义字体的React Native

在这一部分，我们将学习如何在Expo中使用自定义字体。Expo 支持两种字体格式，

1. OTF

复制代码

和

1. TTF

复制代码

，这两种格式在 iOS、Android 和 Web上都能稳定运行。如果你的字体是其他格式，你将需要进行高级配置。
首先，通过运行此命令创建一个新的Expo项目：

1. npx create-expo-app my-app

复制代码

一旦项目成功安装，通过运行

1. npm run start

复制代码

启动开发服务器，并选择iOS 或 Android 选项来打开你的项目。
当你的模拟器完成项目加载后，你应该会看到这个：

使用Google字体

因为我们将

1. Raleway

复制代码

和

1. Quicksand

复制代码

字体添加为我们的自定义字体，我们将安装这两个包：

1. @expo-google-fonts/raleway
   
2. @expo-google-fonts/quicksand

复制代码

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

在Expo项目中集成自定义的Google字体

在你的

1. App.js

复制代码

文件中，粘贴以下代码块：

1. import { Raleway_200ExtraLight } from "@expo-google-fonts/raleway";
   
2. import { Quicksand_300Light } from "@expo-google-fonts/quicksand";
   
3. import { useFonts } from "expo-font";
   
4. import { StatusBar } from "expo-status-bar";
   
5. import { StyleSheet, Text, View } from "react-native";
   
6. export default function App() {
   
7.   const [fontsLoaded] = useFonts({
   
8.     Raleway_200ExtraLight,
   
9.     Quicksand_300Light,
   
10.   });
    
11.   if (!fontsLoaded) {
    
12.     return <Text>Loading...</Text>;
    
13.   }
    
14.   return (
    
15.     <View style={styles.container}>
    
16.       <Text>This text has default style</Text>
    
17.       <Text style={styles.raleway}>This text uses Raleway Font</Text>
    
18.       <Text style={styles.quicksand}>This text uses QuickSand Font</Text>
    
19.       <StatusBar style="auto" />
    
20.     </View>
    
21.   );
    
22. }
    
23. const styles = StyleSheet.create({
    
24.   container: {
    
25.     flex: 1,
    
26.     backgroundColor: "#fff",
    
27.     alignItems: "center",
    
28.     justifyContent: "center",
    
29.   },
    
30.   raleway: {
    
31.     fontSize: 20,
    
32.     fontFamily: "Raleway_200ExtraLight",
    
33.   },
    
34.   quicksand: {
    
35.     fontSize: 20,
    
36.     fontFamily: "Quicksand_300Light",
    
37.   },
    
38. });

复制代码

在这里，我们从各自的包中导入了

1. Raleway_200ExtraLight

复制代码

和

1. Quicksand_300Light

复制代码

。

1. useFonts

复制代码

钩子用于异步加载这些自定义字体。

1. useFonts

复制代码

钩子的结果是一个布尔值数组，我们使用 const

1. [fontsLoaded]

复制代码

语法进行解构，以访问它返回的布尔值。
如果字体成功加载，结果将是

1. [true, null]

复制代码

，这意味着 fontsLoaded 是真的。如果不成功，它将返回

1. [false, null]

复制代码

。如果字体还未加载，我们将返回一个

1. Loading

复制代码

文本。
如果传递给

1. useFont

复制代码

钩子的字体（如上面的代码块所示）已经加载，那么就渲染应用程序，我们指定的字体应该会被使用。
在我们的模拟器中看看这是什么样子：

使用自定义字体

假设你正在构建一个个人的 React Native 项目，并且你得到了一些自定义字体，这些字体并不在 Expo 支持的 Google 字体库中。
首先，你需要下载 font 文件到你的项目中，并安装

1. expo-font

复制代码

包。对于这个教程，我从 FontSquirrel 下载了 Source Code Pro 作为我的自定义字体。
创建一个名为

1. assets

复制代码

的文件夹，并在其中创建一个 fonts 文件夹，就像你使用React Native CLI所做的那样。然后，从

1. fonts

复制代码

文件夹获取并复制字体文件到你的机器和你的项目中，如下所示：

在你的

1. App.js

复制代码

文件中，粘贴以下代码：

1. import { useFonts } from "expo-font";
   
2. import { StatusBar } from "expo-status-bar";
   
3. import { StyleSheet, Text, View } from "react-native";
   
4. export default function App() {
   
5.   const [fontsLoaded] = useFonts({
   
6.     "SourceCodePro-ExtraLight": require("./assets/fonts/SourceCodePro-ExtraLight.otf"),
   
7.     "SourceCodePro-LightIt": require("./assets/fonts/SourceCodePro-LightIt.otf"),
   
8.   });
   
9.   if (!fontsLoaded) {
   
10.     return <Text>Loading...</Text>;
    
11.   }
    
12.   return (
    
13.     <View style={styles.container}>
    
14.       <Text style={styles.default}>This text has default style</Text>
    
15.       <Text style={styles.sourcepro}>This text uses Source Pro Font</Text>
    
16.       <Text style={styles.sourceprolight}>This text uses Source Pro Font</Text>
    
17.       <StatusBar style="auto" />
    
18.     </View>
    
19.   );
    
20. }
    
21. const styles = StyleSheet.create({
    
22.   container: {
    
23.     flex: 1,
    
24.     backgroundColor: "#fff",
    
25.     alignItems: "center",
    
26.     justifyContent: "center",
    
27.   },
    
28.   default: {
    
29.     fontSize: 20,
    
30.   },
    
31.   sourcepro: {
    
32.     fontSize: 20,
    
33.     fontFamily: "SourceCodePro-ExtraLight",
    
34.   },
    
35.   sourceprolight: {
    
36.     fontSize: 20,
    
37.     fontFamily: "SourceCodePro-LightIt",
    
38.   },
    
39. });

复制代码

就像集成 Google 字体一样，

1. useFonts

复制代码

钩子用于从

1. font

复制代码

文件夹加载字体文件，根据字体是否成功加载，返回

1. true

复制代码

或

1. false

复制代码

的值。
如果

1. fontsLoaded

复制代码

不为真，即

1. useFonts

复制代码

钩子中指定的字体没有成功加载，我们将返回一个

1. Loading…

复制代码

文本。否则，我们渲染应用组件并使用已加载的自定义字体。

如上述模拟器输出所示，第一段具有

1. default

复制代码

样式的文本使用默认的

1. fontFamily

复制代码

样式，而接下来的两段文本分别使用了

1. SourceCodePro-ExtraLight

复制代码

和

1. SourceCodePro-Light

复制代码

字体家族来设置文本样式。

在React Native中使用自定义字体时常见的陷阱

在React Native中使用自定义字体时，你可能会遇到一些缺点：

• 字体族名称不匹配：如前文所述，确保字体族名称一致性至关重要。例如，如果你将一个字体作为
  1. SourceCodePro-ExtraLight.otf

  复制代码
  导入，但随后以不同的路径或文件名加载到应用程序中，例如
  1. /assets/fonts/SourceCodePro-ExtraLight.ttf

  复制代码
  ，这将导致应用程序抛出错误，因为存在
  1. fontFamily

  复制代码
  名称不匹配的情况。
  
• 使用不受支持的字体格式：在使用自定义字体时，验证你正在使用的系统（iOS，Android 或网页）是否支持你正在使用的字体格式（例如，
  1. .ttf

  复制代码
  ，
  1. .otf

  复制代码
  ）非常重要。如果不支持，可能会在开发过程中出现意外错误。
  
• 性能影响：在React Native应用程序中添加自定义字体时，请注意它们的文件大小（以kb/mb为单位）。大型字体文件可能会显著增加应用程序的加载时间，特别是在加载自定义字体时。
  

总结

如本文所探讨的，将自定义字体集成到React Native应用程序中不仅仅是技术上的提升，更是一种改善用户体验的策略性方法。无论是使用Expo还是React Native CLI，这个过程都将大大提升你的应用的美观度和可用性。
以上就是在React Native中添加自定义字体的方法详解的详细内容，更多关于React Native添加自定义字体的资料请关注脚本之家其它相关文章！

来源:https://www.jb51.net/javascript/316174e77.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！