android - React Native 矢量图标在 Android 上未正确显示

Question

我通过 their manual 添加了 Material Design Paper 库.

Gradle 打印了很多如下警告:

> Task :app:stripDebugDebugSymbols
Execution optimizations have been disabled for task ':app:stripDebugDebugSymbols' to ensure correctness due to the following reasons:
  - Gradle detected a problem with the following location: '/app/android/app/build/intermediates/merged_native_libs/debug/out'. Reason: Task ':app:stripDebugDebugSymbols' uses this output of task ':app:copyDebugReactNativeVectorIconFonts' without declaring an explicit or implicit dependency. This can lead to incorrect results being produced, depending on what order the tasks are executed. Please refer to https://docs.gradle.org/7.2/userguide/validation_problems.html#implicit_dependency for more details about this problem.

如果通过 Android Studio 运行我的应用程序，它会启动但图标看起来很奇怪(不像 here ):

android/build.gradle:

buildscript {
    ext {
        buildToolsVersion = "32.1.0-rc1"
        minSdkVersion = 30
        compileSdkVersion = 32
        targetSdkVersion = 32
        ndkVersion = "21.4.7075529"
    }
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath('com.android.tools.build:gradle:7.1.1')
    }
}

allprojects {
    repositories {
        maven {
            url("$rootDir/../node_modules/react-native/android")
        }
        maven {
            url("$rootDir/../node_modules/jsc-android/dist")
        }
        mavenCentral {
            content {
                excludeGroup "com.facebook.react"
            }
        }
        google()
        maven { url 'https://www.jitpack.io' }
    }
}

android/app/build.gradle:

project.ext.react = [
    enableHermes: false,
]

apply from: "../../node_modules/react-native/react.gradle"
apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle")
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
applyNativeModulesAppBuildGradle(project)

def enableSeparateBuildPerCPUArchitecture = false

def enableProguardInReleaseBuilds = false

def jscFlavor = 'org.webkit:android-jsc:+'

def enableHermes = project.ext.react.get("enableHermes", false)

def nativeArchitectures = project.getProperties().get("reactNativeDebugArchitectures")

android {
    ndkVersion rootProject.ext.ndkVersion

    compileSdkVersion rootProject.ext.compileSdkVersion

    defaultConfig {
        applicationId "com.company.app"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 4
        versionName "0.2.1"
    }
    splits {
        abi {
            reset()
            enable enableSeparateBuildPerCPUArchitecture
            universalApk false  // If true, also generate a universal APK
            include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
        }
    }
    signingConfigs {
        debug {
            storeFile file('debug.keystore')
            storePassword 'android'
            keyAlias 'androiddebugkey'
            keyPassword 'android'
        }
    }
    buildTypes {
        debug {
            signingConfig signingConfigs.debug
            if (nativeArchitectures) {
                ndk {
                    abiFilters nativeArchitectures.split(',')
                }
            }
        }
        release {
            signingConfig signingConfigs.debug
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }

    applicationVariants.all { variant ->
        variant.outputs.each { output ->
            def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
            def abi = output.getFilter(com.android.build.OutputFile.ABI)
            if (abi != null) {
                output.versionCodeOverride =
                        defaultConfig.versionCode * 1000 + versionCodes.get(abi)
            }

        }
    }
}

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])

    implementation 'com.facebook.react:react-native:0.67.2'  // From node_modules

    implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.1.0"

    debugImplementation('com.facebook.flipper:flipper:0.131.1') {
        exclude group:'com.facebook.fbjni'
    }

    debugImplementation('com.facebook.flipper:flipper-network-plugin:0.131.1') {
        exclude group:'com.facebook.flipper'
        exclude group:'com.squareup.okhttp3', module:'okhttp'
    }

    debugImplementation('com.facebook.flipper:flipper-fresco-plugin:0.131.1') {
        exclude group:'com.facebook.flipper'
    }

    if (enableHermes) {
        def hermesPath = "../../node_modules/hermes-engine/android/"
        debugImplementation files(hermesPath + "hermes-debug.aar")
        releaseImplementation files(hermesPath + "hermes-release.aar")
    } else {
        implementation jscFlavor
    }
}

task copyDownloadableDepsToLibs(type: Copy) {
    from configurations.implementation
    into 'libs'
}

android/settings.gradle:

rootProject.name = 'App'
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle")
applyNativeModulesSettingsGradle(settings)
include ':app'

问题出在哪里？

Answer 1

我遇到了同样的问题，只是把线解决了

申请自:“../../node_modules/react-native-vector-icons/fonts.gradle”

在 android/app/build.gradle 下的文件 build.gradle 上，然后再次 build。

最后，图标也能正确显示。