Question

我尝试了不同的图标，但似乎所有图标都只显示 X 而不是实际图标。没有任何错误消息，这是我使用的代码：

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

<Icon name="heart" size={30} color="red" />

在这种情况下，它应该显示一个心形，但它只是显示一个 X，周围有一个框。

这篇文章似乎有一个解决方案，但我不明白他们做了什么来修复它。 react native vector icons showing X instead of icon

有人知道如何解决这个问题吗？

Answer 1

发现您使用的是 Android 模拟器。以前我也遇到过同样的问题，很多人告诉我链接项目来解决这个问题，但是RN v0.60及以上版本支持自动链接，所以不建议使用手动链接。

npx react-native link -- 在 RN v0.60 以上的项目中避免这种情况

自动添加字体

在android\app\build.gradle中添加这段代码。我只想要 MaterialCommunityIcons.ttf 如果你想要其他字体在这里添加它们会自动添加。

project.ext.vectoricons = [
    iconFontNames: ['MaterialCommunityIcons.ttf'] // Add fonts needed
]

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

这是手动方式（如果自动不起作用）

第一步

将 .ttf 文件从 node_modules\react-native-vector-icons\Fonts 移动到 android\app\src\main\assets\fonts 之后 cd android 并运行 ./gradlew clean 或 gradlew clean< /p>

第 2 步

在 android\app\build.gradle 中添加这一行

project.ext.vectoricons = [
    iconFontNames: ['MaterialCommunityIcons.ttf', 'AnotherFont.ttf'] //name of all the fonts added from node_modules in step 1.
]

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

之后，图标将可见。如果它不起作用，请尝试重置缓存 yarn react-native start --reset-cache & yarn react-native run-android

https://github.com/oblador/react-native-vector-icons/issues/1117#issuecomment-589958315

如果上述方法仍然无效，您可以尝试从库中进行故障排除步骤。

https://github.com/oblador/react-native-vector-icons#the-icons-show-up-as-a-crossed-out-box-on-android

Answer 2

您忘记加载图标...

将其放在导入后：

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

Icon.loadFont();

干杯！

Answer 3

这是一个完整的解决方案。从

复制字体文件夹

node_modules\react-native-vector-icons\Fonts

到

android\app\src\main\assets\fonts

您可以创建默认情况下不存在的文件夹。然后在你的项目根目录下创建一个文件

react-native.config.js 并粘贴此代码。

module.exports = {
    project: {
      ios: {},
      android: {}, // grouped into "project"
    },
    assets: ["./assets/fonts/"], // stays the same
  };

反应本机矢量图标显示 X 而不是图标

3 个答案: