在前端开发中，我们经常会用到各种 icon，比如应用程序的 logo，各种按钮的图标等。本文将介绍一个非常实用的 npm 包，rn-fontawesome，可以方便地在 React Native 项目中使用 Font Awesome 的图标库。
安装
首先，在 terminal 中进入项目根目录，运行如下命令：
npm install --save @fortawesome/fontawesome-free @fortawesome/react-native-fontawesome
此命令将会安装 "@fortawesome/fontawesome-free" 和 "@fortawesome/react-native-fontawesome" 两个 npm 包。
使用
在项目中引入 Font Awesome 图标库，在 App.js 中添加如下代码：
import { library } from '@fortawesome/fontawesome-svg-core';
import { faStar } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
library.add(faStar);此段代码导入所需图标，并将其添加到图标库中。其中，'faStar' 为 Font Awesome 图标库中的一个图标名。
在需要使用图标的组件中，直接使用 FontAwesomeIcon 组件即可，如下所示：
-- -------------------- ---- -------
------ - --------------- - ---- ----------------------------------------
------ - ---- - ---- ---------------
----- ----------- - -- -- -
------ -
------
---------------- ----------- --------- -------------- --
-------
--
-此段代码将会渲染一个大小为 24，颜色为橙色的星星图标。
指导意义
rn-fontawesome 在 React Native 项目中使用 Font Awesome 的图标库变得更加简单和高效。同时，通过本教程的学习，我们了解到了如何在项目中使用 npm 包，并进一步掌握了 Font Awesome 的图标库的使用方式。
示例代码
完整代码示例如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ---- - ---- ---------------
------ - ------- - ---- ------------------------------------
------ - ------ - ---- ------------------------------------
------ - --------------- - ---- ----------------------------------------
--------------------
----- ----------- - -- -- -
------ -
------
---------------- ----------- --------- -------------- --
---------- ---- ------- ------------
-------
--
-
------ ------- ------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601781e8991b448de34c