Come posso visualizzare una gif animata in React Native?

Question

Come posso visualizzare una gif animata in modo che reagisca nativa. Questo è quello che ho provato.

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

Funziona bene con un file .png, ma quando uso un file .gif è vuoto. Ho letto da qualche parte per provare a rinominare il file .gif in un file .png, ma questo mostra solo un fotogramma della gif animata senza animazione. Qualche idea?

Answer 1

è necessario aggiungere l'estensione e richiedono in questo modo:

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

o

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

RN gestisce le immagini gif bene, controllare this example.

Answer 2

Per impostazione predefinita, le immagini Gif non sono supportate nell'app nativa di Android. È necessario utilizzare Fresco per visualizzare le immagini GIF. Il codice:

Modificare il file android/app/build.gradle e aggiungere il seguente codice:

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.+' 
} 

allora avete bisogno di riunire di nuovo l'applicazione, è possibile visualizzare le immagini GIF in due modi come questo.

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 }}/> 

Spero che sia utile agli altri,