react-native-swiper在安卓上不显示内容

React Native有一个第三方的组件可以实现轮播功能，但是在开发安卓应用的时候，如果同时使用了react-navigation的TabNavigator导航，会出现轮播点和左右按钮能出现，但是图片内容不显示的问题。

查看了react-native-swiper的github，发现issue中不少人都遇到了这样的问题 issue：https://github.com/leecade/react-native-swiper/issues/389

最后查找资料发现，在安卓机下，如果用到了可滚动组件例如SectionList,ScrollView或者TabNavigator这种可滑动的组建，swiper都无法正确显示，解决办法是设置setTimeout。

以下是实现的一个正常的图片轮播组件：

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
} from 'react-native';
import Swiper from 'react-native-swiper';

export class ImgSwiper extends Component {

    constructor(props) {
        super(props);
        this.state = {
            swiperShow:false,
        };
    }

    componentDidMount(){
        setTimeout(()=>{
            this.setState({
                swiperShow:true
            });
        },0)
    }

render() {
        if(this.state.swiperShow){ 
            return(
                <Swiper style={styles.imgWrapper}  height={200} 
                    showsButtons={true} autoplay={true}
                >
                    <View style={styles.imgView}>
                        <Image source={ require('../public/images/banner1.jpg')} style={styles.bannerImg} />
                    </View>
                    <View style={styles.imgView}>
                        <Image source={ require('../public/images/banner2.jpg')} style={styles.bannerImg} />
                    </View>
                    <View style={styles.imgView}>
                        <Image source={ require('../public/images/banner3.jpg')} style={styles.bannerImg} />
                    </View>
                    <View style={styles.imgView}>
                        <Image source={ require('../public/images/banner4.jpg')} style={styles.bannerImg} />
                    </View>       
                </Swiper>
            )
        }else {
            return (
                <View style={{height:200}}>
                        <Image source={ require('../public/images/banner1.jpg')} style={styles.bannerImg} />
                </View>
            );
        }
    }
}

const styles = StyleSheet.create({
    imgWrapper: {
        width: '100%',
        height: 200,
    },
    imgView: {
        flex: 1,
        height: 200,
    },
    bannerImg: {
        width: '100%',
        height: 200,
        flex: 1
    }
})

查看代码可以看到，有这样一段

componentDidMount(){
    setTimeout(()=>{
        this.setState({
            swiperShow:true
        });
    },0)
}

然后最后render的时候判断this.state.swiperShow，先不会加载图片轮播，等setTimeout执行后改变了状态，图片轮播被渲染，这样就可以正确实现了。

参考：http://blog.csdn.net/qq_31280709/article/details/73441330