发现在使用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>
)
};
这样在切换时就不会显示白屏了。
网友评论