基于反应原生0.52实现轮播图效果

本文基于反应原生0.52

演示上传到饭桶了，有需要可以看看，写了新内容会上传的(Git地址)

一、总览

轮播图几乎是必备的效果，这里选择react-native-swiper来实现，效果如下图：

二、实现轮播图效果

1、通过新公共管理安装react-native-swiper

新公共管理安装反应-原生-swiper - save2，在推荐。射流研究…引入react-native-swiper

从“反应-本地-swiper”导入Swiper3、用react-native-swiper可以很容易的实现轮播的效果

显示按钮——是否显示左右翻页按钮自动播放——是否自动播放paginationStyle ——包含小点点的容器的样式，这里用来调整位置dotStyle ——小点点的样式活动点样式——当前被激活的小点点的样式swiper style={ style。包装器}高度={宽度* 40/75 }显示按钮={ false }自动播放={ true }分页样式={ style。分页样式}点样式={ style。点样式}活动点样式={ style。活动点样式}图像源={ require('././img/1。jpg ')}样式={ style。banner img }/Image source={ require('././img/2。jpg ')}样式={ style。banner img }/Image source={ require('././img/3。jpg ')}样式={ style。banner img }/Image source={ require('././img/4。jpg ')}样式={ style。banner img }/Image source={ require('././img/3。jpg ')}样式={ style。bannerimg }//Swiper样式：

常量样式=样式表。创建({ container : { flex : 1，alignItems: 'center '，backgroundColor: '#fff '，}，banner limg : { height : width * 40/75，width: width，}，wrapper: { width: width，}，paginnations tyle : { bottom 33:6 }，dotStyle:三、解决不显示问题

轮播图放在应用的首页，同样有不显示的问题，解决办法和上一篇的办法几乎一样，可以看一下上一篇或是完整代码，这里就不再赘述。

这里和上一篇相比有两处不一样，需要说一下。

1、真正调用接口加载图片的时候，不会出现一开始图片不显示的问题。

2、在状态为错误的的时候，先显示第一张图片

如果(这个。国家。swipershow){ return(Swiper……略/Swiper)} else { return(View style={ { height : width * 40/75 } } Image source={ require('././img/1。jpg ')}样式={ style。bannerimg }//View)；}推荐。射流研究…完整代码地址

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。