轉載請標明出處： [http://blog.csdn.net/developer_jiangqq/article/details/50619122](http://blog.csdn.net/developer_jiangqq/article/details/50619122) 本文出自:[【江清清的博客】](http://blog.csdn.net/developer_jiangqq) # (一)前言 ? ? ? ?【好消息】個人網站已經上線運行,后面博客以及技術干貨等精彩文章會同步更新，請大家關注收藏:[http://www.lcode.org](http://www.lcode.org/)??????? ? ? ? 今天我們一起來看一下ViewPagerAndroid組件完成解析以及仿照實現美團首頁頂部效果。 ?????????剛創建的React Native技術交流1群(282693535),React Native交流2群:(496601483)，請不要重復加群！歡迎各位大牛,React?Native技術愛好者加入交流!同時博客左側歡迎微信掃描關注訂閱號,移動技術干貨,精彩文章技術推送! ??????????說到React?Native?for?Android版本中的ViewPagerAndroid組件和Android中的ViewPager控件作用相類似。該容器允許容器中的子視圖相互的左右滑動。每一個ViewPagerAndroid中的子視圖都會當做一個單獨的頁面，并且會撐滿整個ViewPagerAndroid組件的界面。 ??????【特別注意】ViewPagerAndroid中的所有子View必須為控件，不能為復合型的組件。你可以為每一個子視圖添加列如:padding或則backgroundColor之類的屬性。 # (二)官方實例 ??????????如果你學過Android或者Web前端開發，對這樣的ViewPagerAndroid組件還是比較容易學的，該組件我們可以做廣告輪播等相關效果哦~ ?????????首先我們來看一下官方給我們的實例(本人做過相應修改)，具體代碼如下: ~~~ 'use strict'; import React, { AppRegistry, Component, StyleSheet, Text, View, ViewPagerAndroid, } from'react-native'; class ViewPagerDemoextends Component { render() { return ( <View > <Text style={styles.welcome}> ViewPagerAndroid實例 </Text> <ViewPagerAndroidstyle={styles.pageStyle} initialPage={0}> <Viewstyle={{backgroundColor:"red"}}> <Text>FirstPage!</Text> </View> <Viewstyle={{backgroundColor:"yellow"}}> <Text>SecondPage!</Text> </View> </ViewPagerAndroid> </View> ); } } const styles =StyleSheet.create({ pageStyle: { alignItems: 'center', padding: 20, height:200, } }); AppRegistry.registerComponent('ViewPagerDemo',() => ViewPagerDemo); ~~~ 該官方實例運行效果如下:  # (三)屬性方法 * View相關屬性樣式全部繼承(例如:寬和高,背景顏色,邊距等相關屬性樣式) * initialPage? number??ViewPagerAndroid初始索引頁，不過我們可以使用setPage方法來更新頁碼，通過onPageSelected方法來監聽頁面滑動。 * keyboardDismissMode??enum('none','on-drag')??枚舉類型，進行設置在拖拽滑動的過程中是否要顯示鍵盤。 ?????'none'?默認值,在拖拽中不隱藏鍵盤 ?????'on-drag'???當拖拽滑動開始的時候隱藏鍵盤 * onPageScroll? function?方法，該方法在頁面進行滑動的時候執行(不管是因為頁面滑動動畫原因還是由于頁面之間的拖拽以及滑動原因).該會回調傳入的event.nativeEvent對象會有攜帶如下參數: ?????'position'??從左起開始第一個可見的頁面的索引 ?????'offset'??該value值的范圍為[0,1)，該用來代表當前頁面的卻換的狀態。值x代表該索引頁面(1-x)的范圍可見，另外x范圍代表下一個頁面可見的區域 * onPageScrollStateChanged? function?該回調方法會在頁面滾動狀態發生變化的時候進行調用。頁面的滾動狀態有下面三種情況:?? ??????'idle'?該表示當前用戶和頁面滾動沒有任何交互 ??????'dragging'??拖動中，該表示當前頁面正在被拖拽滑動中 ??????'settling'???該表示存在頁面拖拽或者滑動的交互。頁面滾動正在結束。并且正在關閉或者打開動畫。 * onPageSelected? function?方法?該在頁面進行拖拽滑動切換完成之后回調。該方法回調參數中的event.nativeEvent對象會攜帶如下一個屬性?: 'position'??該屬性代表當前選中的頁面的索引. (四)ViewPagerAndroid使用實例 ?????????上面我們已經對于ViewPagerAndroid組件的基本介紹實例以及相關的屬性方法做了詳細講解了，下面我們來返照實現美團首頁頂部分類切換頁面。 首先我們分析一下美團首頁頂部效果，該包含美團的業務Item入口，該每個頁面包含十大版本，一共兩個頁面可以進行左右滑動切換。下面來看一下具體代碼: ~~~ /** * @autor:江清清 * 模仿實現美團首頁頂部分類item功能效果實例 * https://github.com/facebook/react-native */ 'use strict'; import React, { AppRegistry, Component, StyleSheet, Text, View, Image, ViewPagerAndroid, } from'react-native'; var titles_first_data=["美食","電影","酒店","KTV","外賣","優惠買單","周邊游","休閑娛樂","今日新單","麗人"]; var titles_second_data=["購物","火車票","生活服務","旅游","汽車服務","足療按摩","小吃快餐","經典門票","境外游","全部分類"]; var ViewPagerDemo =React.createClass({ getInitialState: function() { return { page:1, }; }, onPageSelected: function(e) { this.setState({page:1+e.nativeEvent.position}); }, render() { return ( <View > <Text style={{textAlign:'center'}}> 美團首頁頂部效果實例 </Text> <ViewPagerAndroid style={styles.pageStyle} initialPage={0} onPageSelected={this.onPageSelected}> <View> <View style={{flexDirection:'row'}}> <View style={{width:70}}> <Image source={require('./img/one.png')} style={styles.imageStyle} /> <Text style={styles.textStyle}>{titles_first_data[0]}</Text> </View> <View style={{width:70}}> <Image source={require('./img/two.png')} style={styles.imageStyle} /> <Text style={styles.textStyle}>{titles_first_data[1]}</Text> </View> <View style={{width:70}}> <Image source={require('./img/three.png')} style={styles.imageStyle} /> <Text style={styles.textStyle}>{titles_first_data[2]}</Text> </View> <View style={{width:70}}> <Image source={require('./img/four.png')} style={styles.imageStyle} /> <Text style={styles.textStyle}>{titles_first_data[3]}</Text> </View> <View style={{width:70}}> <Image source={require('./img/five.png')} style={styles.imageStyle} /> <Text style={styles.textStyle}>{titles_first_data[4]}</Text> </View> </View> <Viewstyle={{flexDirection:'row',marginTop:10}}> <View style={{width:70}}> <Image source={require('./img/six.png')} style={styles.imageStyle} /> <Text style={styles.textStyle}>{titles_first_data[5]}</Text> </View> <View style={{width:70}}> <Image source={require('./img/seven.png')} style={styles.imageStyle} /> <Text style={styles.textStyle}>{titles_first_data[6]}</Text> </View> <View style={{width:70}}> <Image source={require('./img/eight.png')} style={styles.imageStyle} /> <Text style={styles.textStyle}>{titles_first_data[7]}</Text> </View> <View style={{width:70}}> <Image source={require('./img/nine.png')} style={styles.imageStyle} /> <Text style={styles.textStyle}>{titles_first_data[8]}</Text> </View> <View style={{width:70}}> <Image source={require('./img/ten.png')} style={styles.imageStyle} /> <Text style={styles.textStyle}>{titles_first_data[9]}</Text> </View> </View> </View> <View> <View style={{flexDirection:'row'}}> <View style={{width:70}}> <Image source={require('./img/next_one.png')} style={styles.imageStyle} /> <Text style={styles.textStyle}>{titles_second_data[0]}</Text> </View> <View style={{width:70}}> <Image source={require('./img/next_two.png')} style={styles.imageStyle} /> <Text style={styles.textStyle}>{titles_second_data[1]}</Text> </View> <View style={{width:70}}> <Image source={require('./img/next_three.png')} style={styles.imageStyle} /> <Text style={styles.textStyle}>{titles_second_data[2]}</Text> </View> <View style={{width:70}}> <Image source={require('./img/next_four.png')} style={styles.imageStyle} /> <Text style={styles.textStyle}>{titles_second_data[3]}</Text> </View> <View style={{width:70}}> <Image source={require('./img/next_five.png')} style={styles.imageStyle} /> <Text style={styles.textStyle}>{titles_second_data[4]}</Text> </View> </View> <Viewstyle={{flexDirection:'row',marginTop:10}}> <View style={{width:70}}> <Image source={require('./img/next_six.png')} style={styles.imageStyle} /> <Text style={styles.textStyle}>{titles_second_data[5]}</Text> </View> <View style={{width:70}}> <Image source={require('./img/next_seven.png')} style={styles.imageStyle} /> <Text style={styles.textStyle}>{titles_second_data[6]}</Text> </View> <View style={{width:70}}> <Image source={require('./img/next_eight.png')} style={styles.imageStyle} /> <Text style={styles.textStyle}>{titles_second_data[7]}</Text> </View> <View style={{width:70}}> <Image source={require('./img/next_nine.png')} style={styles.imageStyle} /> <Text style={styles.textStyle}>{titles_second_data[8]}</Text> </View> <View style={{width:70}}> <Image source={require('./img/next_ten.png')} style={styles.imageStyle} /> <Text style={styles.textStyle}>{titles_second_data[9]}</Text> </View> </View> </View> </ViewPagerAndroid> <Text style={{flex:1,alignSelf:'center'}}>當前第{this.state.page}頁</Text> </View> ); } }); const styles =StyleSheet.create({ pageStyle: { marginTop:10, alignItems: 'center', height:150, }, textStyle:{ marginTop:5,alignSelf:'center',fontSize:11,color:'#555555',textAlign:'center' }, imageStyle:{ alignSelf:'center',width:45,height:45 } }); AppRegistry.registerComponent('ViewPagerDemo',() => ViewPagerDemo); ~~~ 具體運行效果如下:   # (五)最后總結 ??????????今天我們主要學習一下ViewPagerAndroid組件使用講解以及仿照實現美團首頁頂部功能頁面切換效果。大家有問題可以加一下群React Native技術交流群(282693535)或者底下進行回復一下。 ? ? ? ? 尊重原創，轉載請注明：From Sky丶清（[http://blog.csdn.net/developer_jiangqq](http://blog.csdn.net/developer_jiangqq)） 侵權必究！ ? ? ? ?關注我的訂閱號(codedev123),每天分享移動開發技術(Android/IOS),項目管理以及博客文章!(歡迎關注，第一時間推送精彩文章)  ? ? ?關注我的微博，可以獲得更多精彩內容 ? ? ??[](http://weibo.com/u/1855428195?s=6uyXnP)