react-native-EZSwiper卡片轮播组件Android无法正常轮播

因项目需求,需要做一个卡片的轮播图。然后顺理成章的找到react-native-EZSwiper轮子,很赞。

ios完全能满足我的需求,但是Android测试的时候就凉了。

Android Case:当组件自动轮播到最后一张,我满心期待的看它轮播回到第一张......But,它...停了...停了...了。

是的,它不动了。然后苦逼的我只能看源码了。

当时遇到这个问题我在各种搜,,,看Issue,But是不是就我一个人遇到这个问题。。。没有任何关于这个的问题。。。

组件自动轮播是根据 autoPlay 方法实现自动播放,在autoPlay中调取 scrollTo 方法控制图片位移切换,位移切换过程 onScroll 监测

到方法,根据对应场景再次调取auto或者Scrooll,从而循环。

Andriod在最后一张轮播图时候,scrollTo And onScroll没有被调取。具体原因由于需求比较急就没细看,只是单独针对这个Case做了点改动:

在ScroollTo中轮播到最后一张图片时候代码手动调取ScroollTo方法,但是注意要加入一个SetTimeout Func,否者到最后一张再次轮播时候会非常突兀。

if (index === this.props.dataSource.length && Platform.OS === 'android') {
        setTimeout(()=> {
          this.scrollTo(this.scrollIndex + 1);
        },this.ezswiper.autoplayTimeout * 1000);
      }

其实只是为了解决Android轮播到最后一张不动情况,这行代码已经解决,但是,,切换到第一张的过渡效果确实不尽人意。会出现闪烁情况。继续看源码...然后发现在onScroll监听方法中,每当最后一张切换第一张时候会调取

            offset = this.ezswiper.side;
            this.scrollView.scrollTo({ [this.ezswiper.scrollToDirection]: offset, animated: false });

ios完全OK,andriod就会出现闪屏,哎,硬着头皮继续为了需求搞。。。

针对Android加入以下代码:

              this.scrollView.scrollTo();   //  必须要先调取ScrollTo后再给值
              this.scrollView.scrollTo({ [this.ezswiper.scrollToDirection]: offset, animated: false });

啊哈~好了。。。。卧槽,,,就好了。是的,就好了。

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值