因项目需求，需要做一个卡片的轮播图。然后顺理成章的找到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 });
ok，就好了。
希望能帮组到你
网友评论