"React-native series" 21, the solution RN does not support GIF problem on Android

Because RN does not support images in GIF format on Android platforms, today we describe how we deal with this problem.

Let's take a look at the effect we need to achieve, which is a GIF image that needs to be used when we pull the next page on the list, such as:

Our solution is: to cut the GIF into 15 PNG images, named Loading1, Loading2 .... loading15

Then loop the SetState to modify the picture, just like watching a movie, to achieve the effect of animation.

1. Initialize the image array in the constructor method

Image array var loading_imgs = new Array ()//MAX picture number const IMAGELENGTH = 15;//Animation uses array subscript const IMAGEINDEX = 0;  Constructor (props) {      super (props);      This.state = {          datasource:new listview.datasource ({rowhaschanged: (r1, r2) = R1!== R2,}),          ....          Imageindex:imageindex,      };      Assemble picture array   Total 15 pictures  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);      }  }

2. Pre-loaded image array

Why pre-load?

At the beginning we do, there is no preload, just in the construction method defines the image array Loading_imgs, but on the real machine to see when the first time the picture playback will be very lag, this is because the picture loading into memory takes time, When we turn the picture when the picture has not been loaded, visually causing the effect of the lag.

We initialize the image array to the outside of the screen (absolutely positioned), which is not very good.

  Render () {    return (        <view style={styles.container}>            <view style={{position: ' Absolute ', top:- 1000}}>              {                loading_imgs.map ((item,i) = Loading_imgs[i])              }            </View>       </View>  )};

3. Carousel Pictures

Define picture Carousel function _loop

Switch one picture every 100 milliseconds

When the data is loaded, clear the scheduled task and set the picture to the first one

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), 100);//Clear picture Carousel effect This.timer1 && clearinterval ( This.timer1); this.loopcount =-1;

So that we can achieve the effect of GIF.

In the process we have also found an RN component Activityindicator bug,

<activityindicator                animating={true}                size= "small"              />

When we giveActivityindicatorWhen you set color, the default color on the hammer phone is gray, and when set to red, the animation effect is not.

On the Meizu phone, the default is green, when set to red, the effect is normal.

On the Android platform, the pit of Rn is not a little bit.

"React-native series" 21, the solution RN does not support GIF problem on Android