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';

三.使用

  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

2.Custom basic style & content

3.Pagination

4.Autoplay

5.Control buttons