logo标签列表

React Native矢量图标在当前版本0.60上无法工作

reactjsreact-nativereact-native-iosreact-native-vector-icons
24
5个回答
53
这对我来说很有用，适用于升级过的项目和全新的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矢量图标在两个平台上都可以正常工作。

1
完成这个操作后，我遇到了以下错误：React Native CLI 使用自动链接来处理本地依赖项，但是以下模块已经手动链接：
  • react-native-vector-icons（要取消链接，请运行：“react-native unlink react-native-vector-icons”）。我正在使用 RN V0.62.2。
 - Diptesh Atha
感谢您的回答，我已经寻找了好几个小时了。真的很有帮助。 - Kalpesh Kundanani
很高兴知道答案对你有帮助。 - Rahul Mishra
3
如果你在 iOS 上运行了 `react-native link`，请执行 `cd ios` 然后执行 `pod install`。
一些包仍需要由维护者更新以与 React Native 兼容。
无论如何，如果您不想链接，请在 podfile 中添加：
  pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

"最初的回答" 变成了 "原始答案"。请看下面的翻译：

之后执行我之前说过的相同步骤。

1
React Native 0.60 提供了自动链接功能，我们不能再使用 react-native link，否则会出现错误。 - Rahul Mishra
一些包仍未更新至RN 0.60版本。我将编辑我的问题。 - Auticcat
1
我添加并更新了pod文件，清除构建文件夹并运行，但问题仍然存在。 - Rahul Mishra
1
运行。
npx react-native link

在根目录项目中解决此问题。

希望能有所帮助。

-1

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

但是，链接资产的配置已经改变，过去是通过在package.json中放置rnpm条目并提供要链接的路径来完成的。请查看此处。

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

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中排除不必要的字体？ - Christos Lytras
-2

从'react-native-vector-icons/Feather'导入Icon;

Icon.loadFont();

试一下

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接