React 本机矢量图标在当前版本 0.60 上不起作用答案

【问题标题】：React native vector icon not working on current version 0.60React 本机矢量图标在当前版本 0.60 上不起作用
【发布时间】：2019-07-11 08:55:56
【问题描述】：

React 本机自动链接不适用于 React 本机矢量图标。我用这个把它固定到android中 https://github.com/oblador/react-native-vector-icons/issues/1035

但在 IOS 上我仍然面临问题。如果有人解决了这个问题，请告诉我...谢谢！

这是我遇到的问题的截图。

【问题讨论】：

标签： reactjs react-native react-native-ios react-native-vector-icons

【解决方案1】：

这对我的升级项目和全新的 RN 0.60.0 有效

对于 IOS，将此添加到 ios/projectname/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>MaterialCommunityIcons.ttf</string>
        <string>MaterialIcons.ttf</string>
        <string>Octicons.ttf</string>
        <string>SimpleLineIcons.ttf</string>
        <string>Zocial.ttf</string>
    </array>

对于 Android，将此行添加到 android/app/build.gradle

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

这解决了我的问题，并对在这两个平台上工作的原生矢量图标做出反应。

【讨论】：

执行此操作后，我收到以下错误 React Native CLI 对本机依赖项使用自动链接，但以下模块是手动链接的：- react-native-vector-icons （取消链接运行：“react-本机取消链接 react-native-vector-icons") 。我正在使用 RN V0.62.2
感谢您的回答，正在从 hrs 中寻找此内容.. 真的很有帮助..
很高兴知道答案对您有所帮助。

【解决方案2】：

如果您在 iOS 上使用react-native link，请使用cd ios，然后是pod install。

维护者仍然需要更新一些包才能使用 react native。

Aniway，如果你不想链接进入你的 podfile 并添加：

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

然后按照我之前说的步骤进行操作

【讨论】：

React native 0.60 提供了自动链接，我们不能做 react-native 链接，它会导致错误。
一些软件包仍未针对 RN 0.60 进行更新。我将编辑我的问题
我添加并更新了 pod 文件，清除构建文件夹并运行但仍然是同样的问题。

【解决方案3】：

运行

npx react-native link

在根文件夹项目来解决这个问题。

希望对你有帮助。

【讨论】：

【解决方案4】：

字体、图像和其他外部资产仍应使用 react-native link 命令链接，这是该命令仍然存在的唯一原因。

但是，链接资产的配置发生了变化，过去是通过在 package.json 中放置一个带有要链接的路径的 rnpm 条目。检查here。

现在链接 fontawesome 的正确方法是创建一个 react-native.config.js 文件。

1 - 创建一个 react-native.config.js 文件

 module.exports = {
      project: {
        ios: {},
        android: {},
      },
      assets: [
        './node_modules/react-native-vector-icons/PATH_TO_FONT_A',
        './node_modules/react-native-vector-icons/PATH_TO_FONT_B',
      ],
    };

2 - 运行命令

react-native link

这一次，现在，链接命令将产生一条日志消息，例如

info Linking assets to ios project
warn Group 'Resources' does not exist in your Xcode project. We have created it automatically for you.
info Linking assets to android project
success Assets have been successfully linked to your project

【讨论】：

将node_modules/react-native-vector-icons/Fonts 中的一些字体添加到assets 数组不会排除所有其他字体。如何从react-native-vector-icons 中排除不必要的字体？

【解决方案5】：

从“react-native-vector-icons/Feather”导入图标；

Icon.loadFont();

试试这个

【讨论】：