React-Native学习--轮播图第三方组件-react-native-swiper

来源：互联网发布：艾默生网络能源出售编辑：程序博客网时间：2024/06/05 14:47

一.通过npm安装react-native-swiper

$ npm install react-native-swiper --save$ npm i react-timer-mixin --save

二.在项目中导入

import Swiper from 'react-native-swiper';

三.使用

  render(){    return(        <View>          <Swiper height={200}                  loop={true}                  // showsButtons={true}                  index={0}                  autoplay={true}                  horizontal={false}                  >               {this.renderImg()}//轮播图的元素可以是任意空间 这里添加一组图片+文字(Text)会依次显示<span style="white-space:pre"></span>           </Swiper>        </View>    );  }

  renderImg(){          var imageViews=[];          for(var i=0;i<images.length;i++){              imageViews.push(                  <Image                      key={i}                      style={{flex:1}}                      source={{uri:images[i]}}                      />              );          }          imageViews.push(<Text>lalala</Text>);          return imageViews;      }

四.相关属性说明

1.Basic

PropDefaultTypeDescriptionhorizontaltruebool如果值为true时，那么滚动的内容将是横向排列的，而不是垂直于列中的。looptruebool如果设置为false，那么滑动到最后一张时，再次滑动将不会展示第一张图片。index0number初始进入的页面标识为0的页面。showsButtonsfalsebool如果设置为true，那么就可以使控制按钮（即：左右两侧的箭头）可见。autoplayfalsebool设置为true，则页面可以自动跳转。

2.Custom basic style & content

PropDefaultTypeDescriptionwidth-number如果你没有特殊的设置，就通过flex:1默认为全屏。height-number如果你没有特殊的设置，就通过flex:1默认为全屏。style{...}style设置页面的样式。

3.Pagination

PropDefaultTypeDescriptionshowsPaginationtruebool默认值为true，在页面下边显示圆点，以标明当前页面位于第几个。paginationStyle{...}style设置页面原点的样式，自定义的样式会和默认样式进行合并。renderPagination dot<View style={{backgroundColor:'rgba(0,0,0,.2)', width: 8, height: 8,borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />element可以自定义不是当前圆点的样式activeDot<View style={{backgroundColor: '#007aff', width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />element可以自定义当前页面圆点的样式

4.Autoplay

PropDefaultTypeDescriptionautoplaytruebool设置为true可以使页面自动滑动。autoplayTimeout2.5number设置每个页面自动滑动停留的时间autoplayDirectiontruebool圆点的方向允许默认自己控制

5.Control buttons

PropDefaultTypeDescriptionshowsButtonstruebool是否显示控制箭头按钮buttonWrapperStyle

{position: 'absolute', paddingHorizontal: 15, paddingVertical: 30,  top: 70, left: 0, alignItems:'flex-start'}

style定义默认箭头按钮的样式nextButton

<Text style={{fontSize:60, color:'#00a7ec', paddingTop:30, paddingBottom:30}}>‹</Text>

element自定义右箭头按钮样式prevButton

<Text style={{fontSize:60, color:'#00a7ec', paddingTop:30, paddingBottom:30}}>›</Text>

element自定义左箭头按钮样式

5 1