React Native 矢量图标在 Android 设备上不显示。

Question

我在我的React Native项目中使用了react-native-vector-icons，并通过npm start启动应用程序。

图标在iOS上正常显示，但在Android上不显示。

我尝试过以下几种方法：

• 按照react-native-vector-icons的文档中提供的三种方法（最终将“*.tff”文件放入了字体文件夹中）
• 使用react-native run-android启动应用程序。图标正常显示，但我想要的是将React Native与我的现有Android应用程序集成，而不是完全使用RN应用程序。
• 在我的应用程序中使用jsbundle文件而不是调试服务器

以上几种方法都没有奏效。

因此，我是否应该在我的现有Android应用程序中添加一些内容？

我不知道如何解决这个问题。

---

react@15.2.0

react-native@0.30.0

react-native-vector-icons@2.0.3

node v5.10.1

npm v3.8.3

- Theodore

---

我放弃了，最终只能手动将字体从 myapp/node_modules/react-native-vector-icons/Fonts 文件夹复制到 myapp/android/app/src/main/assets/ 文件夹。 - Vegard

Answer 1

打开 android/app/build.gradle 文件并添加以下内容：

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

你可以按照说明来正确地在Android上安装模块：react-native-vector-icons#install-android。

- Luis Fer Garcia

---

谢谢！别忘了重新构建（npx react-native run-android）。 - Filip Savic

谢谢，非常好的解决方案。解决了我的错误。 - kayes Ibna Qayum

这是有史以来最好的答案！！简洁明了！！ - Hardeep Chhabra

已经解决了。感谢您提供的快速解决方案。 - Mitesh Khatri

为什么不能自动化？ - Saheel Sapovadia

Answer 2

我通过执行以下操作进行了修复：

react-native link
react-native run-android

- Badis Merabet

---

注意，如果你运行这个命令，你只应该使用你需要的包 (例如 react-native link react-native-vector-icons)，否则你可能会重新关联已经以不同方式配置的包。这是我通过艰难的方式学到的。 - Noah Allen

Answer 3

在同一项目路径下打开终端：

react-native link react-native-vector-icons 
react-native run-android 

- Al2x

Answer 4

编辑 android/app/build.gradle

只需添加以下依赖项：

implementation project(':react-native-vector-icons')

如果您使用的是 RN >0.60，则下面的代码行是可选的

编辑 android/app/build.gradle（而不是 android/build.gradle）并添加以下内容：

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

编辑android/settings.gradle，使其看起来像这样：

rootProject.name = 'MyApp'

include ':app'

// Add these two lines
include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

references: https://github.com/oblador/react-native-vector-icons

- Irfan Khan

---

谢谢，这对我很有帮助。虽然我建议您去掉加号符号。 - CodeSammich

Answer 5

In :-   android/app/build.gradle

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

and setting.gradle file add this 

include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

- Sourabh Gera

---

完美解决方案。百分之百有效。谢谢。 - Ali Raza

感谢Ali Raza。 - Sourabh Gera

谢谢，这个解决方案对我有用。 - Cuong Vo

Answer 6

在执行以下步骤后，工作正常。

在此之前，请确保完成以下步骤。

安装软件包：

 yarn add react-native-vector-icons

导入：import Ionicons from 'react-native-vector-icons/Ionicons';

示例代码：

return (
      <View style={styles.buttonCircle}>
        <Ionicons
          testID="nextButton"
          name="arrow-forward"
          color="rgba(255, 255, 255, .9)"
          size={24}
          style={{backgroundColor: 'transparent'}}
        />
      </View>
    );

打开 android/app/build.gradle 并在 react.gradle 之后添加以下提到的代码行。

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

打开 android/settings.gradle 文件，在其中添加下面提到的两行代码。

// 添加以下两行代码

include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

停止开发服务器并重新运行应用程序：react-native run-android

希望对您有所帮助。

- Elavarasan r

---

对于任何想知道该尝试哪个的人，这个对我有效。 - Manu S Pillai

谢谢，它对我有用！你能解释一下它是如何工作的吗？ - Programadores Brasil

Answer 7

我之前也遇到了同样的问题，后来解决了，让我们试试：

1. 打开android/app/build.gradle文件（不是android/build.gradle）
2. 添加以下内容：apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")
3. 之后你必须停止开发环境，然后重新启动/运行它（npm run android）

希望这可以帮助你 :D

- Risqi Ardiansyah

Answer 8

我按照其他答案中提到的配置了所有内容，但仍然在运行 react-native run-android 后看到没有图标的应用程序！

简单地说，我做了以下操作：

cd android && ./gradlew clean

然后再运行

react-native run-android

这样就成功了，耶！

- Nimir

---

我之前非常紧张，找不到解决方案。但这个方法奏效了！谢谢。 - kiwikodes

Answer 9

打开 android/app/bundle.gradle

- Lucky_dev

---

请使用Markdown格式对代码示例进行格式化，附加图像不是最佳选择。https://stackoverflow.com/editing-help#code - ijavid

虽然这段代码可能解决了问题，但是包括解释它如何以及为什么解决了问题将有助于提高您的帖子质量，并可能导致更多的赞。请记住，您正在回答未来读者的问题，而不仅仅是现在提问的人。请[编辑]您的答案以添加解释并指出适用的限制和假设。 - Yunnosch

@ijavid 这个截图实际上帮了我很多。它给了我行号和其他上下文提示。Stack Overflow的管理员们，在对开发者世界有所帮助时，你们并不像自认为的那么聪明 - 但还是感谢你们的工作 ;) - Deco

Answer 10

当导入图标时，它会显示类似于这样的内容。

要解决此问题，请运行：

npx react-native link && npx react-native run android

命令执行后

- Abhijith v