关于前端:如何在React-Native中添加自定义字体

46次阅读

共计 5673 个字符，预计需要花费 15 分钟才能阅读完成。

字体是优良用户体验的基石。应用定制字体能够为你的应用程序提供独特的身份，帮忙你的我的项目在竞争强烈的市场中怀才不遇。

在这篇指南中，咱们将摸索应用 Google Fonts 在 React Native 利用中增加自定义字体的办法。要跟上进度，你应该相熟 React Native 或 Expo SDK 的基础知识，包含 JSX、组件（类和函数式）和款式。

对于咱们的我的项目，咱们将钻研如何通过构建应用 Google 字体的根底应用程序，将自定义字体增加到 React Native CLI 我的项目中。Google 字体是一个收费的开源字体库，可在设计网页和挪动应用程序时应用。

要启动 React Native CLI 我的项目，请在终端中运行以下命令：

npx react-native@latest init CustomFontCLI

CustomFontCLI 是咱们的我的项目文件夹的名称。一旦我的项目胜利装置，你将会看到上面的图片：

在你喜爱的 IDE 中关上你的我的项目以开始。在这个教程中，咱们将应用 VS Code。

一旦我的项目曾经启动，咱们将持续获取咱们想要应用的字体。咱们将探讨如何导入它们并在咱们的我的项目中应用它们。

在这个我的项目中，咱们将应用两种字体：QuickSand 和 Raleway，演示自定义字体的集成，你能够在 Google 字体上找到它们。

在 Google Fonts 中找到你想要的字体，抉择你想要的款式（例如，Light 300, Regular 400 等），并应用“下载全副”按钮下载整个字体文件夹：

该文件夹将以 ZIP 文件的模式下载，其中蕴含一个字体文件夹。在该文件夹内，有一个动态文件夹，所有的 TTF 文件都在其中。复制并保留这些 TTF 文件。

在下一部分，咱们将会解说如何将这些字体的 TTF 文件集成到咱们的 React Native CLI 我的项目中。

在你的我的项目根目录中创立一个名为 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 中应用自定义字体。Expo 反对两种字体格局，OTF 和 TTF，这两种格局在 iOS、Android 和 Web 上都能稳固运行。如果你的字体是其余格局，你将须要进行高级配置。

首先，通过运行此命令创立一个新的 Expo 我的项目：

npx create-expo-app my-app

一旦我的项目胜利装置，通过运行 npm run start 启动开发服务器，并抉择 iOS 或 Android 选项来关上你的我的项目。

当你的模拟器实现我的项目加载后，你应该会看到这个：

因为咱们将 Raleway 和 Quicksand 字体增加为咱们的自定义字体，咱们将装置这两个包：

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

如果你有其余想要应用的 Google 字体，你能够在这里查看 Expo 反对的可用字体。

在你的 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 中应用自定义字体时，你可能会遇到一些毛病：

字体族名称不匹配 ：如前文所述，确保字体族名称一致性至关重要。例如，如果你将一个字体作为 SourceCodePro-ExtraLight.otf 导入，但随后以不同的门路或文件名加载到应用程序中，例如 /assets/fonts/SourceCodePro-ExtraLight.ttf，这将导致应用程序抛出谬误，因为存在 fontFamily 名称不匹配的状况。
应用不受反对的字体格局：在应用自定义字体时，验证你正在应用的零碎（iOS，Android 或网页）是否反对你正在应用的字体格局（例如，.ttf，.otf）十分重要。如果不反对，可能会在开发过程中出现意外谬误。
性能影响：在 React Native 应用程序中增加自定义字体时，请留神它们的文件大小（以 kb/mb 为单位）。大型字体文件可能会显著减少应用程序的加载工夫，特地是在加载自定义字体时。

如本文所探讨的，将自定义字体集成到 React Native 应用程序中不仅仅是技术上的晋升，更是一种改善用户体验的策略性办法。无论是应用 Expo 还是 React Native CLI，这个过程都将大大晋升你的利用的好看度和可用性。

正文完

前端

发表至：前端

2024-02-22

0

关于前端:利用高德地图-API-显示地图信息

关于前端:文字轮播与图片轮播CSS-不在话下

关于前端:企业网站设计细节不能忽略

关于前端:成为解决问题的高手总结篇-解决多人问题的工具

关于crm:CRM系统主要干什么的CRM系统操作流程

关于前端:如何在React-Native中添加自定义字体

向 React Native CLI 我的项目增加自定义字体

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

将 Google 字体集成到我的项目中

将字体链接到要在我的项目文件中应用

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

应用 Google 字体

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

应用自定义字体

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

总结

Just My Socks（注册教程内含优惠码）

关于前端:如何在React-Native中添加自定义字体

向 React Native CLI 我的项目增加自定义字体

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

将 Google 字体集成到我的项目中

将字体链接到要在我的项目文件中应用

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

应用 Google 字体

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

应用自定义字体

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

总结

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）