圖片輪播在App開發中經常使用，這裡圖片輪播使用的是第三方元件react-native-swiper，
我們啟動npm命令列，在專案的根目錄使用如下命令安裝模組。

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

安裝好之後 開始寫程式碼，

1，引入第三方元件

var Swiper = require('react-native-swiper');

這樣我們在專案中就可以直接使用Swiper元件了。

2，準備好輪播圖片的資源，

var images=[
    'http://ac-c6scxa78.clouddn.com/f6b64dc4bf7bee56.jpg'
 
,
    'http://ac-c6scxa78.clouddn.com/91ead58b0bb213b6.jpg',
    'http://ac-c6scxa78.clouddn.com/d67316858f6c71f3.jpg',
    'http://ac-c6scxa78.clouddn.com/c81c5b7be1838a1e.jpg',
    'http://ac-c6scxa78.clouddn.com/54fe022399902788.jpg',
];

3

render() {
        return (
            <Swiper height={200}
                >
 

                {this.renderImg()}
            </Swiper>

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

效果如下：

但是我們發現原點的位置不是我們想要的，那麼如何改變原點的位置 以及顏色呢？

 <Swiper height={200}
     paginationStyle={{bottom:10}}
     autoplay={true}
     dot={<View style={{width:8,height:8,backgroundColor:'white',borderRadius:4,marginLeft:3,marginRight:3}}></View>}
     activeDot={<View style={{width:8,height:8,backgroundColor:'orange',borderRadius:4,marginLeft:3,marginRight:3}}></View>}
                >
      {this.renderImg()}
 </Swiper>

paginationStyle設定點的樣式，
dot和activeDot設定選中和未選中的樣式