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

一.通过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

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

2.Custom basic style & content

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

3.Pagination

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

4.Autoplay

Prop	Default	Type	Description
autoplay	true	`bool`	设置为true可以使页面自动滑动。
autoplayTimeout	2.5	`number`	设置每个页面自动滑动停留的时间
autoplayDirection	true	`bool`	圆点的方向允许默认自己控制

5.Control buttons

Prop	Default	Type	Description
showsButtons	true	`bool`	是否显示控制箭头按钮
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,paddingBottom:30}}>›</Text>	`element`	自定义左箭头按钮样式

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

1.Basic

2.Custom basic style & content

3.Pagination

4.Autoplay

5.Control buttons

猜你在找的React相关文章