轮播图切换图片显示不出来

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

思路：这是因为在切换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>
        )
    };

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

wuyunqiang / ReactNativeUtil

轮播图切换图片显示不出来 #27