React Native矢量图标在Android上显示不正确。

Question

我已经按照官方手册添加了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中运行我的应用程序，它会启动，但图标看起来很奇怪（不像这里）：

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'

问题可能出在哪里？

- Denis Sologub

Answer 1

我曾遇到同样的问题，通过在 android/app/build.gradle 文件下添加如下行：apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" ，再次运行build命令即可解决问题。最后图标也将正确显示。

- mdmostafa

Answer 2

最后，我找到了一个解决方案。我需要将这些字体复制到android/app/src/main/assets/fonts中。

虽然这对我来说仍然很奇怪，因为我以为这个过程会在构建时自动完成。

- Denis Sologub

---

这对我有用...只是需要在node_modules\react-native-vector-icons\Fonts下找到MaterialCommunityIcons.ttf文件，并将其粘贴到android/app/src/main/assets/fonts文件夹中。 - PedroTNascimento