美文网首页
轮播切换图片显示白屏(react-native-swiper|r

轮播切换图片显示白屏(react-native-swiper|r

作者: IDO0 | 来源:发表于2017-11-29 17:53 被阅读0次

    发现在使用react-native-snap-carousel或者react-native-swiper时都会出现切换白屏的情况
    如图:


    whiteScreen.gif

    思路:
    这是因为在切换tab是正好执行图片切换,导致图片渲染不出来。
    我的想法是监听tab的监听事件,在切换前禁止轮播的循环,再次回到此页面时,重新开始循环,这样就不会出现白屏现象。
    步骤:
    1:首先在tab时监听点击事件,因为我是自己自定义的tab,所以可以很容易的获取监听。

    <TouchableOpacity
                    key={route.key}
                    onPress={() => {
                        DeviceEventEmitter.emit('TabChange', index);//这里在跳转前发送一个消息 然后在轮播页监听事件
                        jumpToIndex(index);
                    }}
                    style={{width:WIDTH/count,flexDirection:'row', justifyContent:'space-around',}}
                    activeOpacity={1}
                >
                    <View
                        style={styles.tabItem}>
                        <View style={{flex:1}}/>
                        {this.props.renderIcon(TabScene)}
                        <View style={{flex:1}}/>
                        <Text style={{ ...styles.tabText }}>{this.props.getLabel(TabScene)}</Text>
                        <View style={{flex:1}}/>
                    </View>
                </TouchableOpacity>
    

    关于自定义react-navigation 的Tab请参考
    https://github.com/wuyunqiang/ReactNativeUtil/issues/9
    2:轮播页代码:
    添加监听事件

     componentDidMount() {
            this.listentab = DeviceEventEmitter.addListener('TabChange',this.ListenTab);
    
        }
    

    监听函数:

     ListenTab = (data)=>{
            if(data!=0){
                this.setState({
                    loop:false,
                    autoplay:false,
                })
            }else{
                this.setState({
                    change:true,
                    loop:true,
                    autoplay:true,
                })
            }
        };
    
     renderBanner = () => {
            return (
                <View>
                    <Banner
                        autoplayDelay = {4000}
                        change = {this.state.change}
                        autoplay = {this.state.autoplay}
                        autoplayInterval = {this.state.autoplayInterval}
                        pagination_length={3}
                        itemHeight={NEEDSCALESIZE(310)}
                        sliderHeight={NEEDSCALESIZE(310)}
                        renderItem={this.renderBannerContent}
                        data={this.state.entries}
                        loop={this.state.loop}
                    />
                    {this.renderEntrance()}
                    <View style={{height:SCALE(20),backgroundColor:Color.faf9f9}}></View>
                </View>
            )
        };
    

    这样在切换时就不会显示白屏了。

    相关文章

      网友评论

          本文标题:轮播切换图片显示白屏(react-native-swiper|r

          本文链接:https://www.haomeiwen.com/subject/sprpbxtx.html