發(fā)現(xiàn)在使用react-native-snap-carousel或者react-native-swiper時都會出現(xiàn)切換白屏的情況
如圖:
思路:
這是因為在切換tab是正好執(zhí)行圖片切換,導致圖片渲染不出來。
我的想法是監(jiān)聽tab的監(jiān)聽事件,在切換前禁止輪播的循環(huán)祈匙,再次回到此頁面時汁尺,重新開始循環(huán)日川,這樣就不會出現(xiàn)白屏現(xiàn)象另绩。
步驟:
1:首先在tab時監(jiān)聽點擊事件,因為我是自己自定義的tab,所以可以很容易的獲取監(jiān)聽衷掷。
<TouchableOpacity
key={route.key}
onPress={() => {
DeviceEventEmitter.emit('TabChange', index);//這里在跳轉(zhuǎn)前發(fā)送一個消息 然后在輪播頁監(jiān)聽事件
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>
關(guān)于自定義react-navigation 的Tab請參考
https://github.com/wuyunqiang/ReactNativeUtil/issues/9
2:輪播頁代碼:
添加監(jiān)聽事件
componentDidMount() {
this.listentab = DeviceEventEmitter.addListener('TabChange',this.ListenTab);
}
監(jiān)聽函數(shù):
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>
)
};
這樣在切換時就不會顯示白屏了。