react native fontawesome

如何在React Native应用程序中使用Font-Awesome 5图标

作者

如何在React Native应用程序中使用Font-Awesome 5图标

React Native 中的 Font-Awesome 5 图标

在这个例子中，我们将看到如何使用 字体真棒 React Native 中的图标。 字体真棒图标 是网络上最流行的图标集和工具包。 Font Awesome 是一个强大的图标集，其中包含可缩放的矢量图标。 它有一个包含 8000 多个图标的 PRO 版本，以及一个包含 2000 多个图标的免费版本。 Font Awesome 附带了许多重要类型的图标，例如社交媒体、UI/移动相关的图标等。

推荐：如何使用Windows Movie Maker创建视频

好处

在 React Native 中使用字体图标非常有益，例如

  • 没有臃肿软件，一个软件包带有一个图标集，仅此而已
  • 全套 FontAwesome 图标已正确更新
  • 速度极快，内存占用极小
  • 使用操作系统呈现图标，以获得一流的性能

为什么 Font-Awesome 渲染速度很快？

该包使用 Text 元素来呈现图标。 Text 元素将基于 Font 文件的图标渲染过程委托给操作系统。 iOS 和 Android 渲染字体的速度都快得惊人，而且内存开销很小。 本质上，操作系统将使用 FontAwesome.ttf 来渲染图标，并将受益于多年的本机软件改进和硬件加速。

可以导入类似网站吗？

如果您有网页设计背景或从事过一定程度的 HTML 设计，您必须关注 Font-Awesome 并且也使用过它。 对于网络来说，导入 font-awesome 非常容易，你只需要从 CDN 导入 font-awesome 就可以了。

对于 React Native，您无法像在 HTML 中那样导入很棒的字体。 我们将使用 react-native-fontawesome 库来将字体很棒的图标集成到我们的 React Native 应用程序中。 它非常酷并且非常容易集成到库中。 您只需按照以下步骤操作即可。

在 React Native 中使用 Font-Awesome 图标

使用 Font-Awesome Icon 非常简单，您只需直接从 react-native-fontawesome

// Import FontAwesome Component
// parseIconFromClassName to parse any fa fa-icon into fontawesome
import FontAwesome, {
  SolidIcons,
  RegularIcons,
  BrandIcons,
  parseIconFromClassName,
} from 'react-native-fontawesome';

导入库后，您可以简单地使用它，如下所示

const parsedIcon = parseIconFromClassName('fab fa-apple');
<FontAwesome
  style={styles.iconStyle}
  icon={SolidIcons.truck}
/>
<FontAwesome
  style={styles.iconStyle}
  icon={RegularIcons.addressBook}
/>
<FontAwesome
  style={styles.iconStyle}
  icon={BrandIcons.android}
/>
<FontAwesome
  style={styles.iconStyle}
  icon={parsedIcon}
/>

突出要点

如果您看到我们直接使用具有自定义样式的 FontAwesome 组件。 您可以将样式直接应用到 FontAwesome RN 组件中，只需像在 <Text> 成分。

您需要传递可以从以下位置获取的图标名称 官方网站。 有很多过滤器可以找到您需要的图标。 使用以下 URL 查找本示例的图标：

  1. 实心图标
  2. 品牌图标
  3. 常规的
  4. 发发图标

请记住，Javascript 不接受连字符作为有效的对象名称，因此要在 React Native 中使用图标，请删除所有连字符并将图标名称转换为驼峰式大小写。

例子： th-large 变成 thLarge

如果需要，您还可以解析名称，例如：

import { parseIconName } from 'react-native-fontawesome';

const validIcon = parseIconFromClassName('fas fa-chevron-left') 
/*
  Will parsed to fa-chevron-left to chevronLeft,
  You can now just use the returned value directly
*/
/*
  The function parseIconName internally returns 
  BrandIcons(parsedIconName) or SolidIcons(parsedIconName)
  or RegularIcons(parsedIconName) result.
*/

<FontAwesome style={{fontSize: 32}} icon={validIcon}>

项目概况

我认为这些知识足以开始这个例子了。 在此示例中，我们将创建一个屏幕，其中包含来自 Font-Awesome 的不同类型的图标。 这将是一个基本屏幕，因此无需进行太多描述，因此让我们直接从示例开始。

制作 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 的索引文件的项目结构。

安装依赖

正如我所说使用 FontAwesome 我们将要使用的组件 react-native-fontawesome 包，为此我们需要安装该包。 要安装它，请打开终端并跳入您的项目

cd ProjectName

运行以下命令

npm install react-native-fontawesome --save

此命令会将所有依赖项复制到您的 node_module 目录中。

下载字体

要在 React Native 中使用 FontAwesome，您需要将字体下载为 TTF文件 并且必须在您的项目中包含与我在下面描述的相同的内容。

我们将在本例中使用常规、实心和品牌图标，因此请单击下面的 URL 下载相同的 TTF 文件。

  1. 品牌图标 TTF
  2. 常规图标 TTF
  3. 实心图标 TTF

在 Android 中导入 Font-Awesome 文件

要在Android中使用Fonts-Awesome，您需要在main中创建assets/fonts目录，并复制其中的所有3个字体文件

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

FontAwesomeAndroidFontSetup

在 iOS 中导入 Font-Awesome 文件

请按照以下步骤在 iOS 中使用 Fonts-Awesome 图标

1.在ios中创建一个fonts目录并将所有字体文件复制到那里

FontAwesomeiOSFontSetup1

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

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

FontAwesomeiOSFontSetup2

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

FontAwesomeiOSFontSetup3

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

FontAwesomeiOSFontSetup4

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

<key>UIAppFonts</key>
<array>
    <string>fonts/fa-brands-400.ttf</string>
    <string>fonts/fa-regular-400.ttf</string>
    <string>fonts/fa-solid-900.ttf</string>
</array>

6.完成后是这样的

FontAwesomeiOSFontSetup5

在 React Native 中使用 Font Awesome 图标的代码

如果您已完成上述所有预期步骤，那么您可以转到代码并可以使用 FontAwesome Icons。

应用程序.js

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

// How to Use Font-Awesome 5 Icons in React Native App
// https://aboutreact.com/react-native-fontawesome/

// Import React
import React from 'react';

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

// Import FontAwesome Component
/*
  Import SolidIcons to access Solid Icons ->
  https://fontawesome.com/icons?d=gallery&s=solid
  Import BrandIcons to access Solid Icons ->
  https://fontawesome.com/icons?d=gallery&s=brands
  Import RegularIcons to access Solid Icons ->
  https://fontawesome.com/icons?d=gallery&s=regular
*/
// parseIconFromClassName to parse fa fa-icon into fontawesome
import FontAwesome, {
  SolidIcons,
  RegularIcons,
  BrandIcons,
  parseIconFromClassName,
} from 'react-native-fontawesome';

const App = () => {
  // Parsing a random fa-apple to use it as FontAwesome Icon
  const parsedIcon = parseIconFromClassName('fab fa-apple');

  return (
    <SafeAreaView style={{flex: 1}}>
      <View style={styles.container}>
        <Text style={{fontSize: 30, textAlign: 'center'}}>
          Example to use
          {'\n'}
          Font Awesome Icons
          {'\n'}
          in React Native App
        </Text>
        <Text
          style={{
            fontSize: 25,
            marginTop: 20,
            marginBottom: 30,
            textAlign: 'center',
          }}>
          www.aboutreact.com
        </Text>
        <FontAwesome
          style={styles.iconStyle}
          icon={SolidIcons.truck}
        />
        <Text style={styles.textStyle}>
          Solid Icon
        </Text>
        <FontAwesome
          style={styles.iconStyle}
          icon={RegularIcons.addressBook}
        />
        <Text style={styles.textStyle}>
          Regular Icon
        </Text>
        <FontAwesome
          style={styles.iconStyle}
          icon={BrandIcons.android}
        />
        <Text style={styles.textStyle}>
          Brand Icon
        </Text>
        <FontAwesome
          style={styles.iconStyle}
          icon={parsedIcon}
        />
        <Text style={styles.textStyle}>
          Parsed Icon from class name:
          </Text>
        <Text style={styles.textStyle}>
          'fab fa-apple'
        </Text>
      </View>
    </SafeAreaView>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
    flexDirection: 'column',
  },
  iconStyle: {
    fontSize: 40,
    marginTop: 30,
    color: 'black',
  },
  textStyle: {
    marginTop: 5,
    color: 'black',
  },
});

运行 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 字体 Awesome 示例

IOS

Font Awesome 示例 IOS 1 Font Awesome 示例 IOS 2

这就是如何在 React Native 应用程序中使用 font-awesome 5 图标。 如果您有任何疑问或想分享有关该主题的内容，您可以在下面发表评论或在此处联系我们。 很快就会有更多帖子发布。

推荐：Outlook错误电子邮件系统在处理此邮件时出现问题

发表评论