React Native第三方react-native-swiper组件可以实现轮播功能,但是在开发安卓应用的时候,如果同时使用了react-navigation的TabNavigator导航,会出现swiper内容不显示的问题
查看了react-native-swiper的github,发现issue中不少人都遇到了这样的问题
issue:https://github.com/leecade/react-native-swiper/issues/389
最后查找资料发现,在安卓机下,如果用到了可滚动组件例如SectionList,ScrollView或者TabNavigator这种可滑动的组建,swiper都无法正确显示,
解决办法一:
解决办法是设置setTimeout。
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Image,
} from 'react-native';
import Swiper from 'react-native-swiper';
export class ImgSwiper extends Component {
constructor(props) {
super(props);
this.state = {
swiperShow:false,
};
}
componentDidMount(){
setTimeout(()=>{
this.setState({
swiperShow:true
});
},0)
}
render() {
if(this.state.swiperShow){
return(
<Swiper style={styles.imgWrapper} height={200}
showsButtons={true} autoplay={true}
>
<View style={styles.imgView}>
<Image source={ require('../public/images/banner1.jpg')} style={styles.bannerImg} />
</View>
<View style={styles.imgView}>
<Image source={ require('../public/images/banner2.jpg')} style={styles.bannerImg} />
</View>
<View style={styles.imgView}>
<Image source={ require('../public/images/banner3.jpg')} style={styles.bannerImg} />
</View>
<View style={styles.imgView}>
<Image source={ require('../public/images/banner4.jpg')} style={styles.bannerImg} />
</View>
</Swiper>
)
}else {
return (
<View style={{height:200}}>
<Image source={ require('../public/images/banner1.jpg')} style={styles.bannerImg} />
</View>
);
}
}
}
const styles = StyleSheet.create({
imgWrapper: {
width: '100%',
height: 200,
},
imgView: {
flex: 1,
height: 200,
},
bannerImg: {
width: '100%',
height: 200,
flex: 1
}
})
解决办法二:
将react navigation 中的tabBar 参数 swipeEnabled: false 和 animationEnabled: false, 都设置为false