React native solution for running GIF on Android platform

Overview

Currently RN does not support GIF images in the Android platform and is supported on the iOS platform, and it is expected that the system will be supported by default for Android in later versions. First of all, how do I load GIFs on the iOS platform?

 <Image{require(‘./img/loading.gif‘)}{styles.loading}/>  

Complete Example:

Xportdefault  class Loading extends React. Component {Render () {if(! This. props.isshow) {return<view/>}return(<view style = {styles.)Container}> <image source= {require ('./img/loading.gif ')} style = {styles.loading}/> </View>)}; } Const STYLES = Stylesheet.create ({Container: {backgroundcolor:' Transparent ', Position:' Absolute ', Top:0, left:0, Height:Util.screenSizeUtil.height, Width:Util.screenSizeUtil.width, Alignitems:' Center ', Justifycontent:' Center ',}, loading:{height: -, Width: -,    },  })

RN Solution on Android platform Facebook fresco method

To solve the above problem, there are many ways, the simplest is to use the Facebook Jar Support Library, in the Android/app/build.gradle file to add

‘com.facebook.fresco:animated-gif:0.13.0‘

Fresco is a powerful picture loading component, Android itself's picture library does not support this format, but fresco support. When used, as always, just need to provide a picture of the URI, the rest of the matter, fresco will handle.
If we run a picture named Loading.gif:

<Image source={{uri:loading}} style={{width:20,height:20}}/>

Of course, there is another way on the net, is to implement to read the GIF image, to disassemble the image resources, which is somewhat similar to, in a long time ago, the Android platform is not support GIF, there has been a custom view to the GIF image disassembly, and then run the image scheme. A bit like the Android frame animation, in the XML definition image array, and then use animator to load. However, this method has poor performance.

Custom Component implementations

Cut the GIF into 15 PNG images, named Loading1, Loading2 ... loading15.

Initializing a picture array in the constructor method

//image arrayvarLoading_imgs =New Array();//Max picture countConstImagelength = the;//array subscript used by animationConstImageIndex =0; Constructor(props) {super (props);              This.state = {Datasource:new Listview.datasource ({rowhaschanged: (r1, r2) = R1!== R2,}),            .... imageindex:ImageIndex,};//Assembly picture Array Total 15 photos loading1-LOADING15       for(i=1; i<= imagelength;i++){Let Loadinguri = "loading" + i; Let img = <image Source={{uri:loadinguri}} key={i}style={{width:20,height:20}}/>;        Loading_imgs.push (IMG); }    }

and no rendering.

render() {    return (        <View style={styles.container}>            <View style={{position:‘absolute‘, top:-1000}}>              {                loading_imgs.map((item,i)=> loading_imgs[i])              }            </View>       </View>  )}; 

Carousel Pictures

Switch a picture every 100 milliseconds, when the data is loaded, clear the scheduled task, and place the picture first.

Picture Carousel function _loop () { This. loopcount++;if( This. Loopcount < Loading_imgs.length) { This. SetState ({imageindex: This. Loopcount,}); }Else{ This. Loopcount =-1; }  }//Carousel Picture This. Timerpic = SetInterval ( This. _loop.bind ( This), -);//Clear picture Carousel effect This. timer1 && Clearinterval ( This. timer1); This. Loopcount =-1;

This allows you to implement your own implementation of the GIF run, but its performance is really poor, it is recommended to use the first.

Attached: RN Knowledge Base

React native solution for running GIF on Android platform