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

Question

我想在我的react-native项目中使用Font Awesome图标来安装android.

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

Answer 1

我正在为android和ios回答它

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

1. 项目目录中的make / assets/fonts /目录

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

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

4. 加

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

4. 将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

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

去fontawesome cheatsheet

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

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

适用风格 fontFamily: 'fontawesome'

类似地,你可以为其他矢量图标字体,如离子

和其他没有使用第三方库的人 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>

这些是原始说明.

我只是想在不访问链接的情况下使其可见.