38

我在我的 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
4

16 回答 16

74

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

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

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

于 2016-08-10T19:36:03.457 回答
40

我有同样的问题，我通过执行解决了这个问题：

react-native link
react-native run-android
于 2017-11-10T23:24:41.083 回答
25

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

react-native link react-native-vector-icons 
react-native run-android
于 2019-03-20T23:30:25.140 回答
14

编辑android/app/build.gradle（ NOT 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')

参考资料： https ://github.com/oblador/react-native-vector-icons

于 2020-11-13T21:18:45.297 回答
11

完成以下提到的步骤后，工作正常。

之前，请确保这些步骤。

安装包：

 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

我希望，这很有帮助。

于 2021-03-23T06:54:08.827 回答
10

我有同样的问题，比我解决了这个问题，让我们试试：

  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

于 2020-06-06T05:53:47.477 回答
8

我已按照其他答案中的说明进行了所有配置，但仍在运行react-native run-android我一直看到没有图标的应用程序！

我只是做了：

cd android && ./gradlew clean

然后另一个

react-native run-android

它奏效了！

于 2018-09-16T13:39:49.177 回答
6

打开 android/app/bundle.gradle

在此处输入图像描述

于 2021-02-09T08:49:13.147 回答
6 
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')

在此处输入图像描述

于 2021-10-10T19:30:40.197 回答
5

我有同样的问题，我通过执行解决了这个问题：

npx react-native 链接 react-native-vector-icons npx react-native run-android

于 2021-02-13T15:29:37.343 回答
2

按照官方建议（https://github.com/oblador/react-native-vector-icons#android）在创建包时加载此模块：

编辑 android/app/build.gradle ( NOT android/build.gradle ) 并添加以下内容：

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

于 2020-04-05T14:06:40.230 回答
1

这可能有几个可能的答案：

1-也许您使用的图标仅适用于 ios ...尝试在下面的链接中查看其他徽标包：https ://oblador.github.io/react-native-vector-icons

2-也许您在导入此矢量图标的代码顶部导入了错误的链接以使用该包，例如导入确切的链接：

这是错误的：import Icon from "react-native-vector-icons 这是真的："import Icon from "react-native-vector-icons/MaterialIcons";"

于 2017-08-15T11:55:15.470 回答
0

简单地说npm unlink react-native-vector-icons，然后npm link react-native-vector-icons。（如果你的 ReactNative 版本低于 0.60）

于 2021-08-28T08:46:11.847 回答
0

在 Android 平台图标显示我是这样的：

在此处输入图像描述

在此处输入图像描述

经过一段时间的故障排除后，我终于找到了解决方案。

因为我使用了自己的图标集，所以我通过 IcoMoon App 从 iconSet.svg 创建了 iconSet.ttf。

事实上，我遵循了本教程：https ://medium.com/bam-tech/add-custom-icons-to-your-react-native-application-f039c244386c

IcoMoon 应用程序创建了 *.ttf 和 selection.json，问题出在 selection.json 中。

我将 *.ttf 文件重命名为 myIcons.ttf 但我必须将文件 selection.json 末尾的 fontFamily 和名称更改为与我命名 *.ttf 文件相同的名称。在我的情况下 myIcons.ttf 我在 selection.json 中将 name 和 fontFamily 重命名为 myIcons

于 2021-09-02T08:40:00.973 回答
0

您可以仅通过使用selection.json文件将图标用作 SVG。开发人员体验非常高，需要很少的努力。

我希望这个模块能让你在使用图标时更轻松。

反应-icomoon

于 2022-02-19T09:05:21.147 回答
0

在此处输入图像描述

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

要修复此运行，

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

命令执行后

在此处输入图像描述

于 2022-01-15T11:45:10.133 回答