輪播切換圖片顯示白屏(react-native-swiper|react-native-snap-carousel)

發現在使用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>
        )
    };

這樣在切換時就不會顯示白屏了。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容