Question

我使用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";

我没有错误。

Answer 1

确保您已运行命令：

react-native link react-native-vector-icons

Answer 2

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

确保已将字体添加到XCode项目中。
检查您尝试使用的字体是否显示在Info.plist中，如果您已添加整个文件夹且颜色为蓝色，则需要将其添加到路径中。
检查字体是否复制到Copy Bundle Resources中在构建阶段。
重新编译项目。

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

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

Answer 4

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

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

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

Answer 5

触发loadFont()方法后，相同的问题已解决

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

Icon.loadFont();

Answer 6

rm -rf node_modules, npm install

cd android
gradlew clean

cd ..

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

运行并确认其正常运行

Answer 7

确保您已将.ttf文件导入项目。
同时检查复制包中的资源。
最后，在图片Image Link

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

7 个答案: