web-dev-qa-db-fra.com

Comment afficher les fichiers GIF dans une application Android réactive?

Je souhaite afficher un simple gif via une URL dans la balise Image de mon application Android native-rea, mais aucune image ne s'affiche lorsque je la lance. Le code fourni dans docs ne fonctionne que pour iOS mais pas pour Android:

<Image
  style={styles.gif}
  source={{uri: 'http://38.media.tumblr.com/9e9bd08c6e2d10561dd1fb4197df4c4e/tumblr_mfqekpMktw1rn90umo1_500.gif'}}
/>

Il y avait une question similaire ici, mais comme déjà dit cela ne fonctionne que pour iOS: Comment puis-je afficher un gif animé dans React Native?
En ce qui concerne ce commit, il devrait fonctionner: https://github.com/facebook/react-native/commit/fcd7de5301655b39832d49908e5ca72ddaf91f7e

androidimagereact-nativegif
20
Orlando

Nous avons réduit la bibliothèque principale en rendant facultative le support GIF, par exemple.

À cause de cela nous devons activer manuellement le support gif dans Android . Ajoutez les deux lignes suivantes à votre fichier Android/app/build.gradle sous des dépendances:

compile "com.facebook.fresco:animated-gif:1.3.0"
compile "com.facebook.fresco:animated-base-support:1.3.0"

Ainsi, votre section de dépendances pourrait ressembler à ceci:

dependencies {
  compile fileTree(dir: "libs", include: ["*.jar"])
  compile "com.Android.support:appcompat-v7:23.0.1"
  compile "com.facebook.react:react-native:+"  // From node_modules
  compile "com.facebook.fresco:animated-gif:1.3.0"
  compile "com.facebook.fresco:animated-base-support:1.3.0"

Cela résout le problème de votre version de débogage, mais si vous voulez le résoudre également dans votre version, vous devez ajouter la ligne suivante à votre fichier proguard-rules:

-keep class com.facebook.imagepipeline.animated.factory.AnimatedFactoryImpl { public AnimatedFactoryImpl(com.facebook.imagepipeline.bitmaps.PlatformBitmapFactory, com.facebook.imagepipeline.core.ExecutorSupplier); }

Plus d'informations à ce sujet ici: https://github.com/facebook/fresco/issues/1177

Ceci a été corrigé avec ce commit et sera inclus dans la prochaine version.

40
Orlando

Tout ce qui précède n'a pas fonctionné pour moi avec la dernière version de React Native (v0.48). J'ai dû ajouter les dépendances suivantes dans mon Android/app/build.gradle

compile 'com.facebook.fresco:fresco:1.5.0' compile 'com.facebook.fresco:animated-gif:1.5.0'

15
Tekeste Kidanu

Vous pouvez ajouter ces dépendances. J'utilise ceci dans la version (v0.44.0):

compile 'com.facebook.fresco:animated-base-support:0.14.1'
compile 'com.facebook.fresco:animated-gif:0.14.1'

Dans la version v0.50, il vous suffit d'ajouter

compile 'com.facebook.fresco:animated-gif:1.3.0' 

13
Himanshu Teotia

Nous avons mis à jour "react-native": "^0.57.1", ce qui a empêché nos gifs animés de jouer; ils ont juste rendu la première image de l'animation sous forme d'images statiques.

Pour corriger cela, nous avons inclus les bibliothèques suivantes:

compile 'com.facebook.fresco:animated-gif:1.10.0'
compile "com.facebook.fresco:animated-base-support:1.3.0"

// (Only if supporting WebP.)
compile 'com.facebook.fresco:animated-webp:1.10.0'
compile 'com.facebook.fresco:webpsupport:1.10.0'
4
Mapsy

Pour moi, ajouter les dépendances comme ci-dessous n'était pas suffisant : 

compile 'com.facebook.fresco:animated-gif:1.9.0'

J'ai également dû mettre à jour ma version de gradle dans le fichier:

Android/gradle/wrapper/gradle-wrapper.properties Comme ceci:

distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.Zip

et aussi ma version des outils de construction dans le fichier:

Android/build.gradle comme ceci:

classpath 'com.Android.tools.build:gradle:3.0.1'
0
Shaked Sayag