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

我在使用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'

但是，当我将Fontsome导入为：

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

---

我没有错

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

• 确保已将字体添加到XCode项目中
• 检查您尝试使用的字体是否显示在Info.plist中，如果您已添加整个文件夹，并且它是蓝色的，则需要将其添加到路径中
• 检查字体是否已复制到复制捆绑资源中 在构建阶段
• 重新编译项目
• 确保已将.ttf文件导入到项目中
• 同时签入复制捆绑资源
• 最后，将文件添加到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>

---

如果您已经完成了上述所有步骤，但仍然出现相同的错误，则需要从Xcode清理iOS项目，然后构建它。这将完全重置项目并确保包含.ttf文件
从Xcode中运行您的项目，它现在应该可以工作了
使用

react native run ios

，您可能仍然会发现您的项目仍然无法运行。如果是这种情况，请打开Finder并导航到项目中的ios文件夹，然后删除整个build文件夹。然后关闭模拟器和软件包管理器终端，再次运行

react native run ios

。这将需要几分钟，因为它正在重建所有内容，但（希望）你的应用程序将正常运行

---

触发

loadFont（）

方法后，相同的问题得到修复

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

Icon.loadFont();

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

pod update

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

在ios/projectNameFolder/info.plist中，在标记之间添加下面的代码。如果您已经有这个UIAppFonts数组，只需编辑字符串即可。确保在节点\模块>反应本机向量图标下有字体

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

UIAppFonts
AntDesign.ttf
Entypo.ttf
http://www.ttf.cn
羽毛
font.ttf
FontAwesome5_Brands.ttf
FontAwesome5_Regular.ttf
FontAwesome5_Solid.ttf
基金会
Ionicons.ttf
唯物主义者
MaterialCommunicationIcons.ttf
SimpleLineIcons.ttf
Octicons.ttf
Zocial.ttf

清理缓存并使用重建重新启动应用程序。它应该会起作用

rm -rf node_modules, npm install

cd android
gradlew clean

cd ..

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

---

运行并确认它工作正常
好的，我应该提到我做了所有这些。这是一个关于材质图标的问题。我通过简单地重新启动项目并将所有文件复制到一个新目录来解决这个问题。不确定这是否是一个可接受的解决方案，因此我没有将其作为可接受的解决方案发布。只需重新启动项目似乎就能解决问题。只需在终端中使用npm start--reset cache命令重置项目，然后使捆绑包文件index.android.bundle，之后->react native run android不要忘记使用

react native run ios

或

react native run android

重新编译项目。重要提示：对于RN 0.60及以上版本，我们不需要手动链接libs，即使我们手动链接它，我们也必须取消链接，否则会引发错误。在哪里触发此方法？导入后立即