react-native-swiper用与不用

在项目中,用到了轮播图,然后第一时间就想到了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 是整屏幕宽度。

总结:

不知道这个功能,在之后有没有修复,但是这个事情之后,其实我们要更多的思考别 人的项目是如何实现的,自己能不能去写入源码,实现相同的效果。希望在之后的路上能接触的更多。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容