链接后，React本机矢量图标显示为X

编程问答 2022-06-06

问题描述

我使用以下命令安装了React Native矢量图标：

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

结果如下：

-- react-native-vector-icons@7.1.0
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^2.1.2 (node_modules\jest-haste-map\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\metro\node_modules\jest-haste-map\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\metro-core\node_modules\jest-haste-map\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"x64"})
npm WARN jsdom@15.2.1 requires a peer of canvas@^2.5.0 but none was installed.
npm WARN ws@7.3.1 requires a peer of bufferutil@^4.0.1 but none was installed.
npm WARN ws@7.3.1 requires a peer of utf-8-validate@^5.0.2 but none was installed.
npm WARN ws@7.3.1 requires a peer of bufferutil@^4.0.1 but none was installed.
npm WARN ws@7.3.1 requires a peer of utf-8-validate@^5.0.2 but none was installed.
npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none was installed.
npm WARN use-subscription@1.5.0 requires a peer of react@^17.0.0 but none was installed.

然后我将图标与命令链接起来

npx react-native link react-native-vector-icons

导致以下结果：

warn Calling react-native link [packageName] is deprecated in favor of autolinking. It will be removed in the next major release.
Autolinking documentation: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
info iOS module "react-native-vector-icons" is already linked
info Linking "react-native-vector-icons" Android dependency
info Android module "react-native-vector-icons" has been successfully linked
info Linking assets to ios project
info Linking assets to android project
success Assets have been successfully linked to your project

在 App.js 中，然后按如下所示导入react-native vector-icons GitHub example中显示的图标：

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

，然后将其插入到View标签中，如下所示：

<View>
    <Icon name="rocket" size={30} color="#900" />
</View>

但是显示的图标是一个带有X的框。 像这样：

Icon Displaying X

我不知道发生了什么，因为下载和链接过程似乎都可以正常工作？ 我尝试使用其他一些图标进行测试，它们都带有X。CLI或应用程序中没有错误。

我也尝试查看similar post，但是当我按照指示进行操作时没有运气，我仍然有X。

感谢您的帮助。我是React Native的新手-谢谢

解决方法

请检入您的 android / app / build.gradle （不是android / build.gradle）并添加以下行：

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

然后重建并尝试android应用

供参考，请遵循android安装指南 https://github.com/oblador/react-native-vector-icons#examples

iconsnpmnpmnpmnpxreact-nativereact-nativereact-native-vector-icons