反应原生矢量图标不会在Android设备中显示

Question

我在react本机项目中使用了react-native-vector-icons并启动了应用程序npm start.

图标在iOS中正常显示,但不会在Android中显示.

我试过的事情:

• 在react-native-vector-icons文档中的三个方法(最后我可以在fonts文件夹中看到*.tff文件)
• 使用react-native run-android来启动应用程序.图标显示正常,但我想要的是集成反应原生与我现有的Android应用程序,而不是完全RN应用程序.
• 在我的应用程序中使用jsbundle文件而不是调试服务器

以上都不适用

那么,我应该在现有的Android应用程序中添加一些内容吗？

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

---

react@15.2.0

react-native@0.30.0

react-native-vector-icons@2.0.3

节点v5.10.1

npm v3.8.3

Answer 1

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

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

Answer 2

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')

Answer 3

我遇到了同样的问题,我通过执行以下方法解决了这个问题:

react-native link
react-native run-android

Answer 4

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

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

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

Answer 5

编辑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

Answer 6

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

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

Answer 7

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

我只是做了：

cd android && ./gradlew clean

然后另一个

react-native run-android

它的工作 yaay！

Answer 8

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

之前，请确保这些步骤。

安装包：

 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

我希望，这是有帮助的。

Answer 9

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

为了解决这个问题，

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

命令执行后

Answer 10

打开 android/app/bundle.gradle

Answer 11

我遇到了同样的问题，我通过执行以下命令解决了这个问题：

npx 反应本机链接反应本机矢量图标 npx 反应本机运行 Android