为什么我的 React Native Expo 应用程序中无法加载 Font Awesome 图标？答案

【问题标题】：Why won't Font Awesome icons load in my React Native Expo app?为什么我的 React Native Expo 应用程序中无法加载 Font Awesome 图标？
【发布时间】：2020-07-12 03:45:54
【问题描述】：

我正在尝试将 Font Awesome 集成到我正在开发的 React Native Expo 应用程序中，但我不断收到以下错误：

console.error: "ERROR: icon not found for icon = ", "coffee"

我只是按照以下 GitHub 页面上关于 React Native Font Awesome 的说明进行操作：https://github.com/FortAwesome/react-native-fontawesome

具体来说，首先，我运行了以下命令：

npm i --save react-native-svg #
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/react-native-fontawesome

这些都运行良好。然后我将以下内容添加到我的主屏幕代码中：

import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
...
<FontAwesomeIcon icon="coffee" />

同样，我只是按照上面链接的 GitHub 页面上的说明进行操作。当我做所有这些时，我得到了上面提到的错误。根据我的package.json，我在expo 版本~36.0.0。

有什么想法吗？非常感谢您。

【问题讨论】：

在零食中试过它没有加载。因此，通过反应原生矢量图标添加了 fontawesome 图标，并且其完美运行示例：snack.expo.io/@msbot01/moody-strawberries
我跑了npm install --save react-native-vector-icons，然后react-native link。一切都说成功了。然后我添加了import Icon from 'react-native-vector-icons/FontAwesome';，它起作用了，但是当我添加<Icon name="rocket" size={30} color="#900" /> 时，我得到了以下错误：console.error: "fontFamily "FontAwesome" is not a system font and has not been loaded through Font.loadAsync. ...。有任何想法吗？谢谢。
嘿塞巴斯蒂安...这里是相关线程（如果这没有帮助，请告诉我）---------->github.com/oblador/react-native-vector-icons/issues/789
我尝试了他们的建议，即删除node_modules 文件夹并再次尝试npm i，但这似乎让事情变得更糟。这样做之后，我在运行npm start 时收到以下消息：Some of your project's dependencies are not compatible with currently installed expo package version: - react-native-svg - expected version range: 9.13.3 - actual version installed: ^12.0.3 Your project may not work correctly until you install the correct versions of the packages. To install the correct versions of these packages, please run: expo install [package-name ...]
于是我运行了以下命令：expo install react-native-svg。现在，当我什至尝试导入 @fortawesome/react-native-fontawesome 时，我会出现以下错误：Error: Requiring unknown module "undefined". If you are sure the module exists, try restarting Metro. You may also want to run 'yarn' or 'npm install'. 有什么想法吗？

标签： react-native expo font-awesome react-font-awesome

【解决方案1】：

import {faCoffee} from "@fortawesome/free-solid-svg-icons";

<FontAwesomeIcon icon={faCoffee} />

【讨论】：

这对我不起作用。只是给了我一个新的、不同的错误。对不起。
错误是什么？您是否尝试过删除该应用并重新构建它？

【解决方案2】：

我想通了。这很“容易”，但也不那么明显。

基本上，因为我使用 Expo 来构建我的 React Native 应用程序，所以我不得不使用 Font Awesome 的 Expo 版本。因此，我不需要以前安装的任何 npm 模块。它们都可以卸载。

代替这些模块，我在文件顶部添加了以下内容：

import { FontAwesome } from '@expo/vector-icons';

然后在屏幕上显示 Font Awesome 图标：

<FontAwesome name="times" />

这就是它的全部内容。我想我一开始就采取了错误的方法。对不起所有的混乱。再次感谢所有提供帮助的人。

【讨论】：