如何在不使用任何第三方库的情况下使用Font Awesome进行反应原生项目？

Question

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

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

Answer 1

我正在回答它的android和ios

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

1. 在项目目录中输入 / assets / fonts / 目录

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

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

4. 添加

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



1. 将react-native link命令运行到项目目录中的终端

看到像这样的reslut

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

1. 确保在成功关联
后再次运行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，我认为这是最简单的方法。下载字体并将其放入＆＃39; projectfolder / assets / fonts /＆＃39;目录。我将其重命名为＆＃39; fontawesome.ttf＆＃39;。

之后，如果您还没有安装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”：“此处版本”显示在package.json文件（根应用程序文件夹）中的依赖项下。

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