如何在不使用任何第三方库的情况下在 React Native 项目中使用 Font Awesome？

Question

我想在我的 react-native android 项目中使用 Font Awesome 图标。

我想手动完成，而不使用任何第三方库，如 react-native-vector-icons 或其他库。

Answer 1

我正在为android和ios回答它

下载字体真棒zip解压文件复制fontawesome-webfont.ttf文件

1. 在您的项目目录中创建 /assets/fonts/ 目录

2. 将 fontawesome-webfont.ttf 粘贴到 /assets/fonts/

3. 将文件重命名为 fontawesome.ttf

4. 添加

   "rnpm": { "assets": [ "./assets/fonts/" ] } 像这样进入 package.json 文件的末尾

4. 在项目目录的终端中运行react-native link 命令

看到这样的结果

rnpm-install info Linking assets to ios project
rnpm-install info Linking assets to android project
rnpm-install info Assets have been successfully linked to your project

5. 确保链接成功后再次运行react-native run-android 命令

转到fontawesome cheatsheet

只复制要应用到文本视图的图标的字符代码并粘贴

<Text style={{ fontFamily: 'fontawesome', fontSize: 20 }}>&#xf0a9;</Text>

应用样式fontFamily: 'fontawesome'

类似地，您可以为其他矢量图标字体（如ionicons）执行此操作

以及其他不使用第三方库的人，例如react-native-vector-icons

Answer 2

这有点旧，但仍然。如果你使用 Create React Native App，我认为这是最简单的方法。下载字体并将其放入“projectfolder/assets/fonts/”目录。我将其重命名为“fontawesome.ttf”。

之后，如果您还没有 expo 包，则需要安装它。

npm install --save expo

并将以下行添加到您的索引 (App.js) 文件中。

首先：

import { Font } from 'expo';

然后加载字体。此代码位于您的 App 组件中：

componentDidMount() {
  Font.loadAsync({
    'Font Awesome': require('./assets/fonts/fontawesome.ttf')
  });
}

为了确保您一切正常：

<Text style={{ fontFamily: 'Font Awesome', fontSize: 20 }}>&#xf164;</Text>

Those are original instructions.

我只是想让它在不访问链接的情况下可见。

Answer 3

1. 安装 font-awesome 库。

npm i --save react-native-fontawesome

1. 在您的文件中导入 font-awesome，添加：

从 'react-native-fontawesome' 导入 FontAwesome, { Icons };

1. 在文件中任意位置调用图标。

{Icons.chevronLeft}

注意： 在第 1 步之后，确保 "react-native-fontawesome": "Version here" 显示在 package.json 文件（根应用程序文件夹）的依赖项下。

更多： https://github.com/entria/react-native-fontawesome