神坑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,否则会有如下红屏报错:

 

 

评论
还没有评论
    发表评论 说点什么