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

Question

我正在尝试在react-native-vector-icons中使用 fontAwesome5Pro 。甚至 fontAwesome5 非专业图标似乎也没有显示。旧字体真棒 4 图标显示。我确实有 fontawesome 的 Pro 版本，我运行命令将我的 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 所示：

rnpmpackage.json 中的引用字体：

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

Answer 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>

Answer 2

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

Answer 3

就我而言，我通过以下方式修复了它：

1. 对于 iOS：

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

2. 对于 android，文件命名应为 assets/fonts 中的“FontAwesome5_Pro_Solid.ttf”

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

Answer 4

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

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

用法：

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