错误:安装react-native-elements后无法识别字体系列Material Design图标?

8yparm6h  于 2022-12-24  发布在  React
关注(0)|答案(9)|浏览(138)

我是react-native的新手。我使用react-native-cli创建了一个新项目。我正在使用react-native-elements作为React Native的UI组件库。因此我运行了以下命令

**npm i react-native-elements --save**

在这之后我运行我的模拟器命令,

    • 一月一日**

不确定如何解决此错误。

dy1byipe

dy1byipe1#

如果您来自react-native 0.60+,请在info.plist文件中添加UIAppFonts(下文提到)。并将node_modules/react-native-vector-icons下的字体文件夹拖放到xcode中的项目中。确保您的应用在“添加到目标”下选中,如果您添加整个文件夹,请确保“创建组”选中。

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

abithluo2#

只需在info.plist中添加这些行,删除ios文件夹中的build/文件夹,并重建应用程序npx react-native run-ios

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

ih99xse13#

尝试运行以下命令-

react-native link react-native-vector-icons

如果这不能解决您的问题,那么一旦使用重建您的应用程序,

react-native run-ios

有时CLI无法自动获取更新。

bwleehnv

bwleehnv4#

好的,对于那些认为上面的答案没有帮助的人,我只是把这个添加到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>

然后转到ios文件夹并运行pod安装。再次运行应用程序,它应该工作

x759pob2

x759pob25#

将给定代码添加到文件夹yourAppName/info.plist中的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>

然后在终端运行中

cd ios
pod install
cd ..
npx react-native run-ios //if react-native installed then just react-native run-ios
rkkpypqq

rkkpypqq6#

在我的例子中,我遇到了同样的问题**"错误无法识别的字体系列材质设计图标......",但与Xcode上的其他问题结合在一起"多个命令产生"**。下面是解决我的问题的步骤:

  • npxReact Native取消链接React Native向量图标
  • npm卸载React Native向量图标
  • 删除"node_modules"文件夹
  • npm安装(在项目的根目录)
  • 光盘 ios
  • pod安装
  • 光盘..
  • Reinstall react-native-vector-icons following the options available here(i took the CocoaPods one in my case) https://github.com/oblador/react-native-vector-icons#ios
g2ieeal7

g2ieeal77#

上面的所有答案都表明你应该把MaterialIcons.ttf添加到你的info.plist和其他你正在使用的ttf中:

<key>UIAppFonts</key>
 <array>
   <string>MaterialIcons.ttf</string>
   <string>FontAwesome.ttf</string>
   (write here any other .ttf you're using)
 </array>

但是如果你使用的是CocoaPods,你还应该在Podfile中添加这一行:

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

然后运行下面的命令,它可能会修复这个问题(如果你已经在ios文件夹中,跳过第一行):

cd ios
pod update
cd ..
react-native run-ios

来源:https://www.npmjs.com/package/react-native-vector-icons

ztmd8pv5

ztmd8pv58#

帮我解决了:
1.停堆模拟器
1.添加到ios/{应用程序名称}/info.plist

<key>UIAppFonts</key> (Should already be there)
  <array>
    <string>MaterialIcons.ttf</string>
  </array>

1.跑

cd ios
  pod install
  cd ..
  watchman watch-del-all

1.重启模拟器
注意:我假设你可以为你缺少的每一个字体家族做这件事。

m1m5dgzv

m1m5dgzv9#

我已经完成了上述所有解决方案,但仍然收到相同的错误消息。我没有直接导入特定图标,而是引用了如下所示的“react-native-paper”文档。我怀疑这可能导致了问题?

<TextInput
            placeholder="password"
            mode="outlined"
            value={selected.password}
            label="Password"
            onChangeText={text => dispatch.models_userAuth.setPass(text)}
            secureTextEntry={hidden}
            right={
              hidden ? (
                <TextInput.Icon
                  icon="eye"
                  onPress={() => setHidden(!hidden)}
                />
              ) : (
                <TextInput.Icon
                  icon="eye-off"
                  onPress={() => setHidden(!hidden)}
                />
              )
            }
          />

相关问题