在项目中，用到了轮播图，然后第一时间就想到了react-native-swiper。而react-native-swiper在应用中真的很方便。在图片的展示，app启动切换轮播上都展示着独一无二的效果。而我今天要讨论的是react-native-swiper的一个功能，就是
nextButton 和 prevButton ，以为加上去的效果应该是这样的
但是当我实际使用的时候，箭头功能并不起作用，排查的很多原因一直无法解决，而项目中又是有这样的需求，这就导致我不得不放弃这样优秀的控件。取而代之的是自己实现这样的代码。
首先我们第一步是抓取数据。抓取的数据放数组里，返回也要是数组，
在这里，我们把得到的数组放在state里，之后，遍历这个数组，通过push的方法塞入Image内。在这里我们也要设置Image的一些属性。最关键的一定是一定要有key 否则项目会报黄色警告，最后别忘记返回我们的数组。ps：如果有人遇到了返回多个数组的原因，可能是你的数组设置的是全局，然后没有清空，这样的清空自然也会造成内存溢出的状况。需要在设计的时候就要多加考虑在内的。
其实我们将返回的数组放入ScrollView内。当然ScrollView也有很多属性，官网并没有给我们一一列出，平时多看看别人的案例，也会看到一些官网没有介绍的属性。对自己来说也是一种积累。(废话多了。。。)
OK。到这里为止，大部分功能我们都能实现，因为在ScrollView里，所以滑动屏幕可以实现切换页。然后点击左右键的功能。
这里贴出的代码，scrollTo的方法，这里我写的是，跳到满屏+1的位置，这里的1是像素，其实不很仔细看是看不出来的，毕竟只是“1”像素的问题。
page是我加入了页码的效果。。。额。。。页码的功能吗？onMomentumScrollEnd 在这里写入需要的方法，详细的我就不贴出来了，关键代码就这一行
varcurrentPage=Math.round(Math.round(e.nativeEvent.contentOffset.x)/Math.round(fullWidth)
fullWidth 是整屏幕宽度。
总结：
不知道这个功能，在之后有没有修复，但是这个事情之后，其实我们要更多的思考别 人的项目是如何实现的，自己能不能去写入源码，实现相同的效果。希望在之后的路上能接触的更多。
网友评论