react-native-vector-icons Font Awesome 5 Pro 图标不起作用答案

【问题标题】：react-native-vector-icons Font Awesome 5 Pro icons not workingreact-native-vector-icons Font Awesome 5 Pro 图标不起作用
【发布时间】：2019-08-11 08:09:52
【问题描述】：

我正在尝试在react-native-vector-icons 中使用 fontAwesome5Pro。甚至 fontAwesome5 非专业图标似乎也没有显示。旧字体真棒 4 图标显示。我确实有 Pro 版本的 fontawesome，我运行命令自动将我的 react-native-vector-icons 更新为 pro fontAwesome：./node_modules/.bin/fa5-upgrade 并输入了我的 fontAwesome npm 令牌。那部分似乎已经成功了。

我在应用程序中收到此错误：

图标只是显示为问号。

代码：

import AwesomeIcon from 'react-native-vector-icons/FontAwesome5Pro'

<AwesomeIcon
     style={{
         marginLeft: 20
     }}
     name={'utensils'}
/>

我已将图标放入 xCode：

我已经得到了项目中的图标，如 VS Code 所示：

package.json 中的rnpm 引用了字体：

由于this SO answer，我已将“react-native-vector-icons”从 6.6.0 版更改为 6.3.0 版。但我仍然得到同样的错误。我还可以检查什么来让这些很棒的字体专业图标正常工作？

【问题讨论】：

标签： react-native react-native-ios react-native-vector-icons

【解决方案1】：

字体不在info.plist

解决方案：将此添加到应用程序其他字体所在的info.plist。

<string>FontAwesome5_Pro_Solid.ttf</string>
<string>FontAwesome5_Pro_Brands.ttf</string>
<string>FontAwesome5_Pro_Light.ttf</string>
<string>FontAwesome5_Pro_Regular.ttf</string>

【讨论】：

谢谢，但是如何使用Solid或Regular？仅显示精简版本。
我找到了道具。问候。

【解决方案2】：

更新字体后，运行react-native link将字体复制到相应的平台（ios/android）

【讨论】：

我不做链接，因为我认为它是自动链接。你的回答让我想起了这可能是因为自动链接。

【解决方案3】：

在我的情况下，我通过以下方式修复它：

对于 ios：

“FontAwesome5Pro-Solid.ttf”的命名（都添加对Resources的引用和添加到info.plist）

安卓版文件命名应为 assets/fonts 中的“FontAwesome5_Pro_Solid.ttf”

命名不同，但文档从不这么说。顺便说一句，android必须使用真机，模拟器不会渲染fontawesome pro图标。

【讨论】：

传奇...谢谢。

【解决方案4】：

要使用 FontAwesome5Pro，您应该购买许可证。
您可以通过导入文字来使用FontAwesome5的所有免费图标：

import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';

用法：

<FontAwesome5 name="youtube" size={60} />

【讨论】：