from - ¿Cómo muestro un gif animado en React Native?

react native stretch image

Question

¿Cómo puedo mostrar un gif animado en reaccionar nativo. Esto es lo que he intentado.

<Image source={{uri: "loading"}} />

Funciona bien con un archivo .png pero cuando uso un archivo .gif está en blanco. Leí en algún lugar para intentar cambiar el nombre de .gif a un .png pero eso solo muestra un cuadro del gif animado sin animación. ¿Algunas ideas?

Answer 1

Para Android necesitas agregar la biblioteca de Fresco de Facebook

React Native no viene con soporte GIF de fábrica, pero puede agregar la biblioteca de Fresco de Facebook para agregar este soporte.

Debería poder simplemente agregar lo siguiente a su archivo build.gradle :

compile ''com.facebook.fresco:animated-gif:0.+''

Versión específica de compatibilidad

Si tiene problemas o desea utilizar una versión estática ( muy recomendable), simplemente puede ir a la siguiente página de documentación de React Native y reemplazar el 0.46 en la URL con la versión de React Native que está ejecutando:

https://facebook.github.io/react-native/docs/0.46/image.html#gif-and-webp-support-on-android

Answer 2

Necesita agregar la extensión y solicitarla de esta manera:

<Image source={require(''./path/to/image/loading.gif'')} />

o

<Image source={{uri: ''http://www.urltogif/image.gif''}} />

RN maneja bien imágenes gif, verifica este ejemplo .

Answer 3

Por defecto, las imágenes GIF no son compatibles con la aplicación nativa Android android. Debe configurar el uso de Fresco para mostrar las imágenes gif. El código:

Edita tu archivo android/app/build.gradle y agrega el siguiente código:

dependencies: { 

    ...

    compile ''com.facebook.fresco:fresco:1.+''

    // For animated GIF support
    compile ''com.facebook.fresco:animated-gif:1.+''

    // For WebP support, including animated WebP
    compile ''com.facebook.fresco:animated-webp:1.+''
    compile ''com.facebook.fresco:webpsupport:1.+'' 
}

luego necesitas agrupar la aplicación de nuevo, puedes visualizar las imágenes gif de dos maneras como esta.

   1-> <Image source={require(''./../images/load.gif'')}  style={{width: 100, height: 100 }}/>
   2-> <Image source={{uri: ''http://www.clicktorelease.com/code/gif/1.gif''}}  style={{width: 100, height:100 }}/>

Espero que sea de utilidad para los demás.

Answer 4

Si quieres usar gif como imagen de fondo, puedes usarlo.

<ImageBackground
 source={yourSourceFile}
> 
 -- your content ---
</ImageBackground>