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

Question

我想在我的 android 反应本机项目中使用 Font Awesome 图标。

我想手动执行此操作，而不使用任何第三方库，例如

react-native-vector-icons

或其他库。

Answer 1

我正在为 android 和 ios 回答

下载 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备忘单

仅复制要应用于文本视图的图标的字符代码并粘贴它

<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';

然后加载字体。此代码位于您的应用程序组件内部：

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

确保您一切顺利：

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

这些是原始说明。

我只是想让它可见而不访问链接。

Answer 3

这是 Hastig 答案的扩展（这篇文章已接受的答案），我希望他不介意：

如果您正在寻找字符代码，只需转到字形信息页面，例如https://fontawesome.com/v5/icons/search?f=classic&s=solid

获取 unicode 并将其附加到“&#x”

Answer 4

1. 安装很棒的字体库。

npm i --保存react-native-fontawesome

2. 在文件中导入 font-awesome，添加：

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

3. 在文件中您想要的位置调用图标。

{图标.chevronLeft}

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

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