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

Question

我正在尝试在 react-native-vector-icons 中使用 fontAwesome5Pro。甚至 fontAwesome5 非专业图标似乎也没有显示。旧字体 awesome 4 图标显示。我有专业版的 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 版。但我仍然遇到同样的错误。我还可以检查什么以使这些字体很棒的专业图标正常工作？

Answer 1

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

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

用法：

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

Answer 2

字体不在 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 3

更新字体后，运行 react-native link将字体复制到各自的平台(ios/android)

Answer 4

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

对于 ios:

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

对于android 文件命名应为 assets/fonts

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

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

react-native-vector-icons Font Awesome 5 Pro icons not working

react-native

react-native-ios

react-native-vector-icons