react-native-swiper使用中遇到的bug

• Android中

1. 页码不能正常调用，一会页码正常显示，一会不改变；
2. 图片一会显示，一会不显示；

解决：设置swiper容器延迟加载，并且设置removeClippedSubviews={false}(不删除多出界面的内容)

constructor(props) {
   super(props);
   this.state = {
      visibleSwiper: false
   };
}

componentDidMount() {
   setTimeout(() => {
      this.setState({
        visibleSwiper: true
      });
   }, 100);
}

render() {
   let swiper = null;
   if (this.state.visibleSwiper) {
      swiper = <Swiper height={250} horizontal={true} loop={false} 
         removeClippedSubviews={false}
      >
         <View style={styles.slide1}>
            <Image resizeMode='cover' style={styles.image} source={require('../img/1.jpg')} />
         </View>
      </Swiper>;
   } else {
      swiper = <View></View>;
   }

   return (
      ...
      {swiper}
      ...
   );
}

参考：https://github.com/react-navigation/react-navigation/issues/1572#issuecomment-303554029

 

• IOS中

图片只有第一张显示，左右拖动也不切换

<Swiper height={hh} style={{width:w}} autoplay={true}>

将 width 修改为下面的写法，就可以正常显示和轮播了

<Swiper height={hh} width={w} autoplay={true}>