react-native-swiper demo ，处理更新导致 android 不能显示图片的问题

react-native-swiper-demo.jsx

import React, { Component } from 'react';

import {
    StyleSheet,
    Image,
    View,
    Dimensions,
    TouchableWithoutFeedback,
} from 'react-native';

import NativeSwiper from 'react-native-swiper';

const WIDTH = Dimensions.get('window').width;
const HEIGHT = WIDTH/2.1;

class Item extends Component {
    onPress = () => {
        if(this.props.onPress) {
            this.props.onPress(this.props.item.link);
        }
    }
    render() {
        return (
            <TouchableWithoutFeedback onPress={this.onPress}>
              <View style={styles.imageCont}>
                <Image style={styles.image}
                       source={{uri: this.props.item.url}}
                       resizeMode="stretch" />
              </View>
            </TouchableWithoutFeedback>
        );
    }
}

class Banner extends Component {    
    constructor(props) {
        super(props);
        this.state = {
            toggle: true
        };
        this._shouldUpdate = false;
    }
    shouldComponentUpdate(nextProps, nextState) {
        return this._shouldUpdate;
    }
    componentWillReceiveProps(nextProps) {
        const a = this.props.items.map(i => i.url).join('');
        const b = nextProps.items.map(i => i.url).join('');
        const flag = a !== b;
        if(flag) {
            this._shouldUpdate = true;
            // 要把旧的 banner unmount 掉，否则 android 有问题！一张图片的时候会展示空白
            this.setState({
                toggle: false
            }, _ => {
                this.setState({
                    toggle: true
                });
            });
        } else {
            this._shouldUpdate = false;
        }
    }
    render() {
        const flag = this.props.items.length > 0;
        if(this.state.toggle) {
            return (
                <NativeSwiper showsButtons={false} height={HEIGHT} paginationStyle={styles.pages} loop={flag} autoplay={flag} showsPagination={flag}>
                  { this.props.items.map((item, index) => <Item key={index} onPress={this.props.onPress} item={item} />) }
                </NativeSwiper>
            )
        } else {
            return (
                <View style={styles.container}></View>
            );
        }
    }
};

export default class Swiper extends Component {
    constructor(props) {
        super(props);
        this.state = {
            items: [
			    {
				    "url": "https://p.qpic.cn/qqconadmin/0/86173d2925e6427f8c5bf8aa47028451/0",
				    "link": "https://xxx.yyy.zzz/activities/cz324/index.html?from=middle0324banner&v=1"
			    },
			    {
				    "url": "https://p.qpic.cn/qqconadmin/0/b048d6aec7db45c591b20bb5f027fc02/0",
				    "link": "https://xxx.yyy.zzz/activities/wulikgdagai0320/index.html?from=wlkg0322banner&v=2"
			    },
			    {
				    "url": "https://p.qpic.cn/qqconadmin/0/cefc3fa2b3e941f59cf982a3fcb83f38/0",
				    "link": "https://xxx.yyy.zzz/activities/shuxue0316/index.html?from=sx0316banner&v=1"
			    },
			    {
				    "url": "https://p.qpic.cn/qqconadmin/0/b1ddf0fb2c834200b29787cde4290082/0",
				    "link": "https://xxx.yyy.zzz/activities/leoli/index.html?from=leo0316banner&v=2"
			    }
		    ],
        };
    }
    componentDidMount() {
        setTimeout(_ => {
            this.setState({
                items: [
			        {
				        "url": "https://p.qpic.cn/qqconadmin/0/86173d2925e6427f8c5bf8aa47028451/0",
				        "link": "https://xxx.yyy.zzz/activities/cz324/index.html?from=middle0324banner&v=1"
			        },
			        {
				        "url": "https://p.qpic.cn/qqconadmin/0/b048d6aec7db45c591b20bb5f027fc02/0",
				        "link": "https://xxx.yyy.zzz/activities/wulikgdagai0320/index.html?from=wlkg0322banner&v=2"
			        }
		        ]
            });
        }, 6000);
    }
    onPress = (url) => {
        console.log('#0', url);
    }
    render() {
        return (
            <Banner items={this.state.items} onPress={this.onPress} />
        );
    }
}

var styles = StyleSheet.create({
    container: {
        height: HEIGHT,
    },
    pages: {
        bottom: 5, 
    },
    imageCont: {
        flex: 1,
        height: HEIGHT,
        justifyContent: 'center',
        alignItems: 'center',
    },
    image: {
        height: HEIGHT,
        width: WIDTH,
        flex: 1,
    }
});