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

前端之家收集整理的这篇文章主要介绍了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

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

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相关文章