मैं अपने जीआईएफ को अपने आरएन एप्लिकेशन के एंड्रॉइड संस्करण पर एनिमेट करने के लिए संघर्ष कर रहा हूं। आईओएस संस्करण लूपिंग जीआईएफ को अपेक्षित रूप से एनिमेट कर रहा है लेकिन मुझे एंड्रॉइड डिवाइस पर जीआईएफ से केवल एक "एकल फ्रेम" छवि दिखाई देती है।

डिबगिंग और RN-दस्तावेज़ीकरण के अनुसार implementation की कुछ पंक्तियों को dependencies में /android/app/build.gradle के भीतर जोड़ना आवश्यक है, लेकिन सफाई के बाद भी ग्रेडल (./gradlew clean /android फ़ोल्डर में चल रहा है) और RN ऐप के कैशे को हटाना (प्रोजेक्ट रूट फ़ोल्डर में react-native start --reset-cache चलाना), मुझे कोई अंतर नहीं दिख रहा है मेरे आवेदन में।

मैंने गुगल किया है और बहुत कोशिश की है। मेरे डिबगिंग साहसिक कार्य के आधार पर, मैंने इन सुझावों की कोशिश की है और दोबारा जांच की है, जो दूसरों के लिए काम करता प्रतीत होता है लेकिन ऐसा लगता है कि यह मेरे लिए काम नहीं कर रहा है ...

  • मैंने फ्रेस्को-पुस्तकालयों के कई संस्करणों की कोशिश की है जो ऐसा लगता है आवश्यक हो और मैंने दोनों में लाइनों को रखने की भी कोशिश की है नीचे और साथ ही dependencies के ऊपर।
  • कुछ उत्तर कोड की एक या अधिक पंक्तियों को जोड़ने का भी सुझाव देते हैं android/app/proguard-rules.pro लेकिन यह नहीं बदलता है कुछ भी।
  • मैं अपने आवेदन के विभिन्न तरीकों से जीआईएफ का उपयोग करता हूं लेकिन यह हमेशा होता है width और height, <Image /> की style प्रॉपर्टी में शामिल हैं।
  • मैंने विभिन्न सीडीएन और डोमेन से जीआईएफ-यूरीस के साथ प्रयास किया है।
  • मेरे परीक्षण उपकरणों पर ऐप को फिर से इंस्टॉल किया।
  • मेरे कोड संपादकों को बंद और फिर से खोल दिया।

मैं निम्नलिखित संस्करणों का उपयोग कर रहा हूं:

  • जावा: 11.0.12
  • प्रतिक्रिया मूल निवासी: 0.65
  • एंड्रॉइड एसडीके: 30.0.2
  • एनपीएम: 6.14.4

यह मेरा पूरा /android/app/build.gradle है:

apply plugin: "com.android.application"

import com.android.build.OutputFile


project.ext.react = [
    enableHermes: false,  // clean and rebuild if changing
]

apply from: "../../node_modules/react-native/react.gradle"


def enableSeparateBuildPerCPUArchitecture = false
def enableProguardInReleaseBuilds = false
def jscFlavor = 'org.webkit:android-jsc:+'
def enableHermes = project.ext.react.get("enableHermes", false);

android {
    ndkVersion rootProject.ext.ndkVersion

    compileSdkVersion rootProject.ext.compileSdkVersion

    defaultConfig {
        applicationId "com.example.app"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
    }
    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
        }
        release {
            // Caution! In production, you need to generate your own keystore file.
            // see https://reactnative.dev/docs/signed-apk-android.
            signingConfig signingConfigs.debug
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }

    // applicationVariants are e.g. debug, release
    applicationVariants.all { variant ->
        variant.outputs.each { output ->
            // For each separate APK per architecture, set a unique version code as described here:
            // https://developer.android.com/studio/build/configure-apk-splits.html
            // Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc.
            def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
            def abi = output.getFilter(OutputFile.ABI)
            if (abi != null) {  // null for the universal-debug, universal-release variants
                output.versionCodeOverride =
                        defaultConfig.versionCode * 1000 + versionCodes.get(abi)
            }

        }
    }
}

dependencies {

    implementation fileTree(dir: "libs", include: ["*.jar"])
    //noinspection GradleDynamicVersion
    implementation "com.facebook.react:react-native:+"  // From node_modules

    implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"

    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
      exclude group:'com.facebook.fbjni'
    }

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

    debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") {
        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
    }


    implementation project(':react-native-notifications')
    implementation 'com.google.firebase:firebase-core:16.0.0'
    implementation 'com.google.android.gms:play-services-ads:19.8.0'
    implementation "androidx.appcompat:appcompat:1.0.0"

    implementation 'com.facebook.fresco:fresco:2.4.0'
    implementation 'com.facebook.fresco:animated-gif:2.4.0'
    implementation 'com.facebook.fresco:webpsupport:2.4.0'
}

// Run this once to be able to run the application with BUCK
// puts all compile dependencies into folder libs for BUCK to use
task copyDownloadableDepsToLibs(type: Copy) {
    from configurations.compile
    into 'libs'
}

apply plugin: 'com.google.gms.google-services'

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

मुझे बताएं कि क्या मैंने कुछ स्पष्ट याद किया है। मैं निश्चित रूप से आईओएस-विकास में अधिक अनुभवी हूं, इसलिए यह बहुत संभव है कि मुझे कुछ याद आया :-)

2
Simon Degn 22 अगस्त 2021, 19:20

3 जवाब

सबसे बढ़िया उत्तर

फास्टइमेज लाइब्रेरी का उपयोग करना एक आसान फिक्स होगा जिसमें कैशिंग और अधिक के अतिरिक्त लाभों के साथ जीआईएफ समर्थन का निर्माण होता है

2
Muhammed Yasir MT 31 अगस्त 2021, 05:10

मैं रिएक्ट नेटिव में एनिमेटेड जिफ कैसे प्रदर्शित करूं?

android/app/build.gradle जोड़ें

    // For animated GIF support
    compile 'com.facebook.fresco:animated-gif:1.+'
0
iyoda 24 अगस्त 2021, 17:29

मुझे स्वयं एंड्रॉइड पर जीआईएफ के साथ समस्याएं थीं और एनिमेटेड वेबप पर आगे बढ़ना समाप्त हो गया, जिसे Google गले लगाता है और यहां तक ​​​​कि अपने स्वयं के रूपांतरण उपकरण भी हैं। उनके पास इसके लिए कई वर्षों से एंड्रॉइड समर्थन है और ऐसा लगता है कि यह लगातार अधिक काम करता है। पीएनजी के बजाय एक्सटेंशन को वेबप में बदलकर भी काम कर सकते हैं?

https://frescolib.org/docs/webp-support.html

0
Mike 31 अगस्त 2021, 05:11