神坑react native之react-native-swiper组件导入react-navigation中不显示文字图片等内容的解决方案

开发环境：react native：0.51  ， react-native-swiper：1.5.6 ， react-navigation：1.0.0 beta27

APP主要架构使用的是react-navigation组件的TabNavigator实现底部tab切换，但是在首屏中引入封装好的 react-native-swiper模块，左右切换箭头和圆点指示器是有的，但里面的文字和图片就是不显示。

这是APP在初始渲染的时候，react-native-swiper和react-navigation有冲突导致的，解决思路是让react-native-swiper的render方法用定时器延迟一下，具体方法如下：

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

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

render(){
    if(this.state.swiperShow){
        return (
                <Swiper style={styles.wrapper} height={200} showsButtons={true}>
                    <View style={styles.slide1}>
                        <Text style={styles.text}>Hello Swiper</Text>
                    </View>
                    <View style={styles.slide2}>
                        <Text style={styles.text}>Beautiful</Text>
                    </View>

                </Swiper>
        )
    }else{
        return <View></View>
    }
}

注意，在render方法里判断的时候一定要加上else，否则会有如下红屏报错：