在使用react-native-swiper時还棱，最好不要放到（FlatList , SectionList,ListView,ScrollView 等）組件中撤摸，否則Android 可能不會正常顯示圖片温眉；
我們只需要在
初始化的時候設(shè)置一個屬性來控制顯示swiper缸匪，然后在componentDidMount后，通過setTimeout來改變顯示即可：
- 設(shè)置控制顯示swiper的屬性
constructor(props) {
super(props);
this.state = {
showSwiper: false
};
}
- 通過setTimeout控制swiper顯示出來
componentDidMount(){
setTimeout(()=>{
this.setState({swiperShow:true});
},0)
}
- 渲染swiper的方法
//渲染swiper
renderSwiper = () => {
if (this.state.showSwiper) {
return (<Swiper
style={styles.wrapper}
showsButtons={false}
key={this.props.banner.length} //需要添加key芍殖，否則報錯
activeDotColor={"#fff"}
paginationStyle={{bottom: scaleSize(10)}}
autoplay={true}>
{
this.props.banner.map((item, index) => {
<View style={styles.slide} key={item.title}>
<Image
style={{
width: width,
height: scaleSize(160),
}}
resizeMode={"cover"}
source={{uri: item.img}}
/>
</View>);
})
}
</Swiper>)
} else {
return (<View style={{height: scaleSize(160)}}/>)
}
}
- render方法中調(diào)用
render() {
return (
<View style={{height: scaleSize(160), width: width}}>
{this.renderSwiper()}
</View>
)
}
- 結(jié)束豪嗽！
