无法识别的字体系列答案

【问题标题】：Unrecognized font family ionicons无法识别的字体系列
【发布时间】：2016-08-02 06:32:47
【问题描述】：

我按照NativeBase Docs 中的设置说明运行rnpm link。我收到此错误： Unrecognized font family ionicons

Xcode 也检查过，字体已经在构建阶段。我错过了什么？

【问题讨论】：

【解决方案1】：

对于 RN 0.60+ 不要使用react-native link ...！（见Autolinking）

而是将其添加到您的 Podfile:

pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

然后运行pod update（或pod install）。

此外，在您的Info.plist 中添加此内容：

<key>UIAppFonts</key>
<array>
  <string>AntDesign.ttf</string>
  <string>Entypo.ttf</string>
  <string>EvilIcons.ttf</string>
  <string>Feather.ttf</string>
  <string>FontAwesome.ttf</string>
  <string>FontAwesome5_Brands.ttf</string>
  <string>FontAwesome5_Regular.ttf</string>
  <string>FontAwesome5_Solid.ttf</string>
  <string>Foundation.ttf</string>
  <string>Ionicons.ttf</string>
  <string>MaterialIcons.ttf</string>
  <string>MaterialCommunityIcons.ttf</string>
  <string>SimpleLineIcons.ttf</string>
  <string>Octicons.ttf</string>
  <string>Zocial.ttf</string>
</array>

（取自https://github.com/oblador/react-native-vector-icons#option-with-cocoapods）

在我的项目中工作正常：

"react": "16.9.0",
"react-native": "0.61.1",
"native-base": "2.13.8" (react-native-vector-icons@6.6.0),

【讨论】：

我已经尝试了所有其他解决方案，这是唯一适用于 react-native 0.61.5 ???
现在它可以在 React Native 0.63.2 上正常工作，谢谢伙计！
这解决了我在互联网上遵循了几个答案和教程后的问题，但是虽然应用程序编译，所有图标都出现一个“？”代替图像。您可以告诉我为什么会发生这种情况，如果需要，我会发布一个更详细的问题。感谢@Eddy。

【解决方案2】：

扩展现有答案并使用this github issue 上的解决方案，执行以下操作；

关闭正在运行的打包程序
运行react-native link react-native-vector-icons
然后运行react-native start --reset-cache
最后运行react-native run-ios重启模拟器

【讨论】：

在第 2 步之前删除 node_modules 并运行 npm install
关闭打包程序（运行终端）是我的问题。

【解决方案3】：

使用Icon.loadFont() 方法加载字体。

示例（添加您的 App.tsx）：

import AntDesign from 'react-native-vector-icons/AntDesign';
import Ionicons from 'react-native-vector-icons/Ionicons';
import Feather from 'react-native-vector-icons/Feather';

AntDesign.loadFont().then();
Ionicons.loadFont().then();
Feather.loadFont().then();

【讨论】：

这是 2021 年来到这里的人的正确答案。

【解决方案4】：

如果您使用的是 0.60 及以上版本，则需要执行以下步骤：-

<key>UIAppFonts</key>
<array>
 <string>AntDesign.ttf</string>
 <string>Entypo.ttf</string>
 <string>EvilIcons.ttf</string>
 <string>Feather.ttf</string>
 <string>FontAwesome.ttf</string>
 <string>FontAwesome5_Brands.ttf</string>
 <string>FontAwesome5_Regular.ttf</string>
 <string>FontAwesome5_Solid.ttf</string>
 <string>Foundation.ttf</string>
 <string>Ionicons.ttf</string>
<string>MaterialIcons.ttf</string>
<string>MaterialCommunityIcons.ttf</string>
<string>SimpleLineIcons.ttf</string>
<string>Octicons.ttf</string>
<string>Zocial.ttf</string>
</array>

然后运行以下命令：-

react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios

清理和构建之后。运行 ios 应用程序。这个解决方案对我有用:)

【讨论】：

【解决方案5】：

如果您启动打包程序，然后通过 rnpm link 链接包，就会发生这种情况。

这需要您重新启动打包程序并重试。

【讨论】：

【解决方案6】：

编辑 PodFile 并添加 pod RNVectorIcons 不是必需的，因为添加 react-native-vector-icons

后 自动链接 将正常工作

添加到 PodFile 会在下次运行 react-native run-ios 后引发警告：

Warning: following modules are linked manually: - react-native-vector-icons (to unlink run: "react-native unlink react-native-vector-icons"

只需将这行代码添加到您存在于 ios/yourPorjectName/ 上的 info.plist 中

找到UIAppFonts并在中添加代码：

        <string>AntDesign.ttf</string>
        <string>Entypo.ttf</string>
        <string>EvilIcons.ttf</string>
        <string>Feather.ttf</string>
        <string>FontAwesome.ttf</string>
        <string>FontAwesome5_Brands.ttf</string>
        <string>FontAwesome5_Regular.ttf</string>
        <string>FontAwesome5_Solid.ttf</string>
        <string>Foundation.ttf</string>
        <string>Ionicons.ttf</string>
        <string>MaterialIcons.ttf</string>
        <string>MaterialCommunityIcons.ttf</string>
        <string>SimpleLineIcons.ttf</string>
        <string>Octicons.ttf</string>
        <string>Zocial.ttf</string>

曾与：

"react-native": "0.63.3",

"react-native-vector-icons": "^7.1.0"

【讨论】：

【解决方案7】：

我的 mac.solution 也有同样的问题：

关闭终端窗口和模拟器。
在您的项目所在的同一文件夹中写下.. React-native 链接 react-native-vector-icons
然后启动项目。, React-native run-ios

【讨论】：

【解决方案8】：

如果您的 iOS 项目使用 CocoaPods（包含 Podfile）并且链接库具有 podspec 文件，则 react-native 链接将使用 Podfile 链接库。

将下面的评论添加到您的 podfile 的底部。

# Add new pods below this line

然后运行“react-native link [package_name]”

这对我有用。

【讨论】：

【解决方案9】：

native-base 具有 'react-native-vector-icons' 作为依赖项，但如果您使用的是 react-native

简单的命令：

react-native link react-native-vector-icons

【讨论】：