1

我使用以下命令安装了 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":"any"} (current: {"os":"win32","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":"any"} (current: {"os":"win32","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 示例中的图标,如下所示:

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

然后将其插入到 View 标签中,如下所示:

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

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

显示 X 的图标

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

我也尝试查看类似的帖子,但没有运气,因为我按照指示按照步骤操作,我仍然有 X。

任何帮助表示赞赏。我是 React Native 的新手 - 谢谢

4

1 回答 1

0

请检查您的android/app/build.gradle ( NOT android/build.gradle ) 并添加以下行:

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

然后重建并尝试android应用

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

于 2020-10-23T05:19:28.430 回答