React Native 上无法识别的字体系列答案

【问题标题】：Unrecognized Font Family on React NativeReact Native 上无法识别的字体系列
【发布时间】：2016-10-24 21:51:03
【问题描述】：

我在使用 React Native 时遇到了一个特殊的错误。在我的button.js里面我正在做

import Icon from "react-native-vector-icons/MaterialIcons";
const icon = (Icon name="menu size={20} color="green"/>);
render()
    return(
         {icon}
    )

但我得到了错误

Unrecognized Font Family 'Material Icons'

但是，当我将 FontAwesome 导入为：

import Icon from "react-native-vector-icons/FontAwesome";

我没有错误。

【问题讨论】：

只需重启项目似乎确实可以解决问题。
只需在终端中使用 npm start --reset cache 命令重置项目，然后制作 bundle 文件 index.android.bundle，然后 -> react-native run-android

标签： javascript ios reactjs fonts react-native

【解决方案1】：

同样的问题在触发loadFont()方法后得到修复

import Icon from 'react-native-vector-icons/FontAwesome';

Icon.loadFont();

【讨论】：

在哪里触发这个方法？
根据回答导入语句后

【解决方案2】：

确保您已运行命令：

react-native 链接 react-native-vector-icons

【讨论】：

不要忘记使用react-native run-ios 或react-native run-android 重新编译您的项目。
重要提示： 对于 RN 0.60 及以上版本我们不需要手动链接库，即使我们手动链接也必须取消链接，否则会引发错误。

【解决方案3】：

npm install --save react-native-vector-icons

将下面的行添加到 ios/podfile 文件中，然后运行 pod update

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

在 ios/projectNameFolder/info.plist 的标签之间添加下面的代码。如果您已经有了这个 UIAppFonts 数组，只需编辑字符串。确保你在 node_modules>react-native-vector-icons 下有字体

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

清理缓存并通过重建重新启动应用程序。它应该可以工作。

【讨论】：

【解决方案4】：

您使用的库有一个特定的section about this problem，它声明（在版本 2.0.3 中）：

确保已将字体添加到 XCode 项目中。
检查您尝试使用的字体是否出现在 Info.plist 中，如果您添加了整个文件夹并且它是蓝色的，那么您需要将其添加到路径中。
检查字体是否复制到复制捆绑资源中在构建阶段。
重新编译项目。

【讨论】：

对，我应该提到我已经完成了所有这些。这是 Material Icons 的具体问题。我通过简单地重新启动项目并将所有文件复制到新目录来解决它。不确定这是否是一个可接受的解决方案，所以我没有这样发布。

【解决方案5】：

如果您已完成上述所有步骤，但仍然遇到同样的错误，您需要从 Xcode Clean 您的 iOS 项目，然后 Build 它。这将完全重置项目并确保包含 .ttf 文件。

在 Xcode 中运行您的项目，它现在应该可以工作了。

使用react-native run-ios，您可能仍然会发现您的项目仍然无法运行。如果是这种情况，请打开 Finder 并导航到项目中的 ios 文件夹，然后删除整个 build 文件夹。然后关闭你的模拟器和包管理器终端，再次运行react-native run-ios。这将需要几分钟，因为它正在重建所有内容，但随后（希望）您的应用将正常运行。

【讨论】：

【解决方案6】：

rm -rf node_modules, npm install

cd android
gradlew clean

cd ..

npm install --save react-native-vector-icons
react-native link

运行并确认它正在工作

【讨论】：

【解决方案7】：

确保您已将 .ttf 文件导入到您的项目中。
同时签入复制包资源。
最后，将文件添加到 info.plist 中，如图像Image Link

【讨论】：