适用于Android/iOS的React Native中的自定义字体

React Native 自定义字体

这是在 Android 和 iOS 的 React Native 中使用自定义字体的示例。我们将看到如何在 React Native 中使用自定义字体？我们在哪里可以找到自定义字体？下载自定义字体以及在 Android 和 iOS 中导入的步骤，最后是代码示例，它将让您对在 React Native 中使用自定义字体有一个完美的了解。

在当前情况下，字体和图标在应用程序中具有相同的重要性。如果您正在计划使用漂亮的图标的应用程序，那么您还需要漂亮的字体来使其完美。我个人观察到现在许多应用程序都使用自定义字体。如果您还想在 React Native 应用程序中使用自定义字体，那么您可以继续此示例。

在 React Native 中使用自定义字体非常简单。您不需要任何外部库，只需在 Android 和 iOS 项目中添加字体即可。

如何在 React Native 中使用自定义字体

正如我所说，要在 React Native 中使用自定义字体，您需要在 Android 和 iOS 项目中添加字体（添加自定义字体的步骤如下所述），在项目中添加自定义字体后，您可以直接使用 fontFamily 支撑 Style。

请记住，您需要先导入字体，然后才能使用它 fontFamily

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
    flexDirection: 'column',
  },
  textLargeStyle: {
    fontSize: 40,
    textAlign: 'center',
    // Below is the custom font
    fontFamily: 'DancingScript-Bold',
  },
  textSmallStyle: {
    fontSize: 35,
    marginTop: 20,
    marginBottom: 30,
    textAlign: 'center',
    // Below is the custom font
    fontFamily: 'DancingScript-Regular',
  },
});

在哪里可以找到自定义字体？

对于那些有同样问题的人，您可以从以下位置获得许多不同的字体 Google 字体的官方网站。只需访问该网站并选择您喜欢的字体即可。

项目概况

在此示例中，我们将有两个文本组件，我们将在其上应用不同的自定义字体，以便我们可以了解它的工作原理。此示例中的主要内容是下载字体并将其导入到 Android 和 iOS 项目中，如下所述。那么让我们开始执行在 React Native 中应用自定义字体的步骤。

制作 React Native 应用程序

React Native 入门将帮助您更多地了解如何制作 React Native 项目。我们将使用 React Native 命令行界面来制作我们的 React Native 应用程序。

如果您之前安装了全局的react-native-cli软件包，请将其删除，因为它可能会导致意外问题：

npm uninstall -g react-native-cli @react-native-community/cli

运行以下命令创建一个新的 React Native 项目

npx react-native init ProjectName

如果你想使用特定的 React Native 版本启动一个新项目，你可以使用 –version 参数：

npx react-native init ProjectName --version X.XX.X

注意如果上述命令失败，您可能使用的是旧版本 react-native 或者 react-native-cli 在您的电脑上全局安装。尝试卸载 cli 并使用 npx 运行 cli。

这将在项目目录中创建一个带有名为 App.js 的索引文件的项目结构。

下载字体

首先下载您想要在 React Native 中使用的字体。 Google Fonts 网站上有许多自定义字体，但在本例中，我使用的是

这是一种非常有设计感的字体，完成示例后您将能够轻松找到字体的差异。

单击链接转到下载站点并按照步骤操作

1. 打开 URL 后，您将看到一些应用了自定义字体的示例文本。单击 选择这个款式

自定义字体下载1

2. 点击后 选择此风格。您可以点击 下载家庭

自定义字体下载2

3. 这将下载包含字体的 zip 文件。简单来说，字体是一些 ttf 文件，您可以在其中找到 静止的 下载的zip解压后的目录

自定义字体下载3

在 Android 中导入自定义字体文件

要在 Android 中使用自定义字体，您需要创建 资源/字体 目录在 项目名称/android/app/src/main 并且必须复制其中的所有字体文件

项目名称/android/app/src/main/assets/fonts

自定义字体Android设置

在 iOS 中导入自定义字体文件

请按照以下步骤在 iOS 中使用自定义字体图标

1.在iOS项目中创建一个fonts目录并将所有字体文件复制到其中

自定义字体iOS设置1

2.现在打开项目 YourProject -> ios -> YourProject.xcworkspace 在 Xcode 中。

3. 在 Xcode 中打开项目后，单击左侧边栏中的项目以打开选项并选择 将文件添加到“YourProjectName”

自定义字体iOSSetup2

4. 选择字体您创建的目录。记得选择 创建文件夹引用 从下面点击添加

自定义字体iOSSetup3

5. 现在单击 项目名 在左上角，然后选择项目名称目标。点击信息顶部菜单上的选项卡可查看 Info.plist 并添加 应用程序提供的字体 和 字体文件 到Info.plist。

自定义字体iOSSetup4
如果您是一名 iOS 开发人员或了解 信息列表 然后你可以直接添加以下几行到 信息列表 但如果您执行了上述操作，那么您不必担心这一点，因为 XCode 已经添加了该操作。

<key>UIAppFonts</key>
<array>
    <string>fonts/DancingScript-Medium.ttf</string>
    <string>fonts/DancingScript-Bold.ttf</string>
    <string>fonts/DancingScript-Regular.ttf</string>
    <string>fonts/DancingScript-SemiBold.ttf</string>
</array>

6.完成后是这样的

自定义字体iOSSetup5

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

如果您已完成上述所有预期步骤，则可以转到代码并可以使用自定义字体。

跳入您的项目

cd ProjectName

应用程序.js

在任何代码编辑器中打开 App.js 并将代码替换为以下代码

// Use of Custom Fonts in React Native for iOS & Android
// https://aboutreact.com/custom-fonts-in-react-native/

// Import React
import React from 'react';

// Import required component
import {
  SafeAreaView,
  StyleSheet,
  Text,
  View
} from 'react-native';

const App = () => {
  return (
    <SafeAreaView style={{flex: 1}}>
      <View style={styles.container}>
        <Text style={styles.textLargeStyle}>
          Use of Custom Font in React Native App
        </Text>
        <Text style={styles.textSmallStyle}>
          www.aboutreact.com
        </Text>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
    flexDirection: 'column',
  },
  textLargeStyle: {
    fontSize: 40,
    textAlign: 'center',
    // Below is the custom font
    fontFamily: 'DancingScript-Bold',
  },
  textSmallStyle: {
    fontSize: 35,
    marginTop: 20,
    marginBottom: 30,
    textAlign: 'center',
    // Below is the custom font
    fontFamily: 'DancingScript-Regular',
  },
});

export default App;

运行 React Native 应用程序

再次打开终端并使用跳转到您的项目。

cd ProjectName

1.启动Metro Bundler

首先，您需要启动 Metro，React Native 附带的 JavaScript 捆绑器。要启动 Metro 捆绑程序，请运行以下命令

npx react-native start

一旦您启动 Metro Bundler，它将永远在您的终端上运行，直到您将其关闭。让 Metro Bundler 在自己的终端中运行。打开一个新终端并运行该应用程序。

2.启动React Native应用程序

在 Android 虚拟设备或真实调试设备上运行项目

npx react-native run-android

或在 iOS 模拟器上运行（仅限 macOS）

npx react-native run-ios

输出截图

这就是如何在 Android 和 iOS 的 React Native 中使用自定义字体。如果您有任何疑问或想分享有关该主题的内容，您可以在下面发表评论或在此处联系我们

适用于Android/iOS的React Native中的自定义字体