文章最後附上源碼地址
上一片博客鏈接RN開發實踐——仿攜程App（一）
實現首頁的輪播圖
Swiper簡介
The best Swiper component for React Native。Swiper是目前應用較廣泛的移動端網頁觸摸內容滑動js插件。
Swiper : GitHub地址
1.基本屬性：
| 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.頁碼屬性
| Prop | Default | Type | Description |
|---|---|---|---|
| showsPagination | true | bool | 默認值爲true，在頁面下邊顯示圓點，以標明當前頁面位於第幾個。 |
| paginationStyle | {…} | style | 設置頁面原點的樣式，自定義的樣式會和默認樣式進行合併。 |
| renderPagination | |||
| dot | … | element | 可以自定義不是當前圓點的樣式 |
| activeDot | … | element | 可以自定義當前 |
3.自動播放的屬性
| Prop | Default | Type | Description |
|---|---|---|---|
| autoplay | true | bool |
設置爲true可以使頁面自動滑動。 |
| autoplayTimeout | 2.5 | number |
設置每個頁面自動滑動停留的時間 |
| autoplayDirection | true | bool |
圓點的方向允許默認自己控制 |
引入Swiper第三方庫
進入項目的根目錄執行下面的指令：
npm i react-native-swiper --save
// 建議安裝1.5.5版本比較穩定: npm i react-native-swiper@1.5.5 --save如果報錯請執行多次
使用Swiper庫，自定義Banner輪播圖組件
新建一個Banner組件
封裝自己的一個輪播組件Banner，將在這個控件使用Swiper。
使用Banner組件
在HomePage中使用剛纔創建的Banner組件，預先佔個位置，效果後面一步一步實現。
執行效果：
給Banner傳遞數據
- 準備數據
這裏呢，在App文件夾裏創建一個data文件夾，用來存放一些模擬數據，建立了一個homebean的Json數據文件。用於首頁數據加載。
- 導入數據
在HomePage組件中引入homebean這個json數據文件
//導入數據
var homebean=require('../../date/homebean.json');
- 把數據傳遞給Banner組件
獲取到homebean數據中的banners集合（輪播圖數據），並通過在Banner組件中定義好的屬性 banners 傳遞給Banner組件。
{/*廣告輪播圖*/}
<Banner banners={homebean.banners}></Banner>
- Banner組件接收數據
回到Banner組件中，獲取屬性值(this.props.banners)接收傳遞過來的輪播圖數據。
//接收數據
var banners=this.props.banners;
引入Swiper第三方庫
Banner組件獲取完數據，引入Swiper，開始使用Swiper來實現輪播圖
簡單的佈局
在Swiper簡單的創建兩個View組件(每個組件對應一個輪播圖)，預覽看下效果，Swiper默認會生成指示器。
添加每個輪播廣告圖
遍歷傳遞過來的banners輪播圖數據，
添加每個輪播廣告圖。
獲取屏幕的寬度，根據效果圖每個輪播廣告圖的寬爲手機的寬度
//獲取手機屏幕的寬
var {width} =Dimensions.get('window');
修改輪播圖指示器的顏色
通過對Swiper組件屬性的瞭解，改變dot 和 activedot,來修改輪播圖指示器選中和爲選中的樣式，這裏dot和activedot，需要傳遞一個View組件，並給View設置對應的樣式style即可。
修改輪播圖指示器的位置
通過設置Swiper屬性paginationStyle 來修改輪播圖的指示器位置，底層是通過絕對定位實現。
循環滾動和自動滾動
通過設置Swiper屬性loop和autoplay開啓輪播圖循環和自動滾動。
最終輪播圖實現效果如下：
最後附上項目地址