使用带有 react-native-elements 的 Font Awesome答案

【问题标题】：Use Font Awesome with react-native-elements使用带有 react-native-elements 的 Font Awesome
【发布时间】：2019-09-08 09:21:00
【问题描述】：

我想将react-native-element 与 React Native 应用程序一起使用。首先，我安装了成功的 react-elements。现在我正在尝试使用类型为font-awesome 的Icon。但是图标显示不正确。我是否还需要单独安装 font-awesome 才能使图标正常工作？或者我在这里错过了什么。这是我的代码，

<Icon
    raised
    name='heartbeat'
    type='font-awesome'
    color='#f50'
    onPress={() => console.log('hello')} />

谢谢！

【问题讨论】：

您可以发布日志吗？如果图标未显示，则应打印警告或错误。
没有任何错误或警告打印在控制台上。它只是显示交叉占位符而不是图标。
您尝试过不同的图标名称吗？尝试“心跳”，因为他们在官方文档中使用它。 react-native-training.github.io/react-native-elements/docs/…
我刚刚尝试了一个干净的项目。安装 react-native-elements，然后安装 react-native-vector-icons。然后使用react-native link react-native-vector-icons 链接它。为我工作。如果它仍然不适合您，最好取消链接，删除 node_modules 文件夹并通过 npm i 重新安装所有内容。
@MaximilianKrause：它的工作！谢了哥们。请将其作为答案发布 - 以便我标记它。

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

【解决方案1】：

react-native-elements 如果您不使用 Expo 或 create-react-native-app，则需要手动安装 react-native-vector-icons。 See the documentation (React Native CLI) for more info.

安装完这两个软件包后，您需要链接react-native-vector-icons（如您在README of the GitHub repo 中所见）。最简单的方法是这样做：

react-native link react-native-vector-icons

之后，一切都应该正常工作。如果您已经完成了所有这些但仍然无法正常工作，请删除node_modules 文件夹并使用npm i 重新安装您的节点包。如果仍然无法正常工作，请尝试手动链接包（您可以在上面链接的 GitHub 存储库中找到有关如何执行此操作的指南）。

【讨论】：