RN開發京東客戶端首頁（三）——輪播圖的實現

1.相關控件調研

目前在Github開源的輪播圖控件，我的認爲作得比較好的，一個是react-native-swiper（https://github.com/leecade/react-native-swiper），一個是react-native-viewpager（https://github.com/race604/react-native-viewpager），而通過試用發現，react-native-swiper雖然效果和樣式較多、控制方便，但在將它縮小爲一個固定高度的視圖時，其底部的指示符號（即幾個點，以下圖）就不見了，因此最終我推薦使用react-native-viewpager，簡單好用！

 

 

2.添加相關文件

下來咱們將素材和相關的庫導入項目當中，其中，react-native-viewpager的添加方法以下：

 

npm i -d react-native-viewpager --save

而後在工程的images文件夾中建立banner文件夾，其中放入4個jpg文件：

 

1 const BANNER_IMGS = [
2     require('../images/banner/1.jpg'),
3     require('../images/banner/2.jpg'),
4     require('../images/banner/3.jpg'),
5     require('../images/banner/4.jpg')
6 ];

3.構建ViewPager

通過分析，咱們能夠看到，首頁輪播圖的樣式十分簡單，只須要指定高度，而水平方向，利用flex:1進行拉伸

但因爲react-native-viewpager做者在構建這個控件的時候，應該是用到一些變量進行控制，並提供了一種方法，用於建立圖片數據源，因此，若是須要使用react-native-viewpager必須在構造函數中進行初始化，具體代碼以下：

接着，咱們在HomePage類的定義前，建立一個數組常量，用於存放圖片：

 1   constructor(props) {
 2         super(props);
 3         // 用於構建DataSource對象
 4         var dataSource = new ViewPager.DataSource({
 5             pageHasChanged: (p1, p2) => p1 !== p2,
 6         });
 7         // 實際的DataSources存放在state中
 8         this.state = {
 9             dataSource: dataSource.cloneWithPages(BANNER_IMGS)
10         }
11     }

而在render函數中，ViewPager的使用也是至關簡單的，具體寫法以下：

1  <ViewPager
2        style={{height:130}}
3         dataSource={this.state.dataSource}
4          renderPage={this._renderPage}
5          isLoop={true}
6            autoPlay={true}
7 />

其中：

style：樣式，和其餘控件設置方式相似

dataSource：即在構造函數中利用dataSource對象和圖片數組常量，建立的真實dataSource

renderPage：方法類型，返回一段JSX，用於指定ViewPager每頁的內容，該方法寫法以下，切忌根據WebStorm的提示加上static！：

1  _renderPage(data, pageID) {
2         return (
3             <Image
4                 source={data}
5                 style={styles.page}/>
6         );
7     }

isLoop：是否循環播放，按照示例代碼設置便可

autoPlay：是否自動播放，按照示例代碼設置便可

locked: 設置爲true即禁用ViewPager的點擊

onChangePage: 頁面切換的回調函數

renderPageIndicator: 自定義指示器樣式的渲染

animation：若是以爲原始的效果不滿意，能夠在這個字段中設置一個函數，自定義動畫效果

固然，要記得給ViewPager和其中的item添加樣式：

1 const styles = StyleSheet.create({
2     page: {
3         flex: 1,
4         height: 130,
5         resizeMode: 'stretch'
6     }
7 });

保存一下代碼，在模擬器上看看效果吧

 

工程源碼及資源文件：https://github.com/yuanguozheng/JdApp

本次Commit：https://github.com/yuanguozheng/JdApp/commit/2d1741bef1c7908c9e0d2f52c23210e8de2fcc7a