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

j2qf4p5b  于 2023-03-19  发布在  React
关注(0)|答案(7)|浏览(113)

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

我没有错。

knpiaxh1

knpiaxh11#

触发loadFont()方法后修复了相同问题

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

Icon.loadFont();
xqkwcwgp

xqkwcwgp2#

确保您已运行以下命令:
React Native链接React Native向量图标

kd3sttzy

kd3sttzy3#

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>

清理缓存并重新启动应用程序。它应该工作。

2sbarzqh

2sbarzqh4#

您使用的库有一个关于此问题的特定部分,它指出(在版本2.0.3中):

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

voase2hg5#

如果你已经完成了上述所有步骤,但仍然得到同样的错误,你需要从Xcode中清理你的iOS项目,然后构建它。这将完全重置项目,并确保包含.ttf文件。
在Xcode中运行您的项目,现在应该可以工作了。
使用react-native run-ios时,你可能仍然会发现你的项目仍然无法正常工作。如果是这样,请打开Finder,导航到项目中的ios文件夹,删除整个build文件夹。然后关闭模拟器和包管理器终端,再次运行react-native run-ios。这将需要几分钟的时间,因为它正在重建所有内容。但之后(希望如此)您的应用程序将正确运行。

dxxyhpgq

dxxyhpgq6#

rm -rf node_modules, npm install

cd android
gradlew clean

cd ..

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

运行并确认其工作正常

pkln4tw6

pkln4tw67#

  • 确保已将.ttf文件导入项目。
  • 同时签入拷贝捆绑包资源。
  • 最后,将文件添加到info.plist中,如图Image Link所示

相关问题