# 轉載請標明出處： [http://blog.csdn.net/developer_jiangqq/article/details/50664323](http://blog.csdn.net/developer_jiangqq/article/details/50664323) 本文出自:[【江清清的博客】](http://blog.csdn.net/developer_jiangqq) # (一)前言 ?????????【好消息】個人網站已經上線運行,后面博客以及技術干貨等精彩文章會同步更新，請大家關注收藏:[http://www.lcode.org](http://www.lcode.org/)??????? ? ? ? ?今天我們一起來看一下PullToRefreshViewAndroid下拉刷新組件講解以及使用實例 ??????????剛創建的React Native技術交流1群(282693535),React Native交流2群:(496601483)，請不要重復加群！歡迎各位大牛,React?Native技術愛好者加入交流!同時博客左側歡迎微信掃描關注訂閱號,移動技術干貨,精彩文章技術推送! ??????????該PullToRefreshViewAndroid視圖是封裝了Android平臺的下拉刷新組件(SwipeRefreshLayout)，該組件支持設置單一的可以滾動的子視圖(例如:ScrollView)。當內部的子視圖的垂直方向的偏移量scrollY:0的時候，手指往下拖拽該視圖的時候回觸發onRefresh事件方法。 ???????? [注意].該組件風格需要設置成{flex:1}。當我們滾動的子視圖為ScrollView或者ListView的時候。 # (二)屬性方法 ?????????? 1.繼承可以使用View組件的所有Style(具體查看:[http://facebook.github.io/react-native/docs/view.html#style](http://facebook.github.io/react-native/docs/view.html#style)) ?????????? 2.colors[ColorPropType]?設置下拉刷新加載進度指示器的顏色，可以設置多多種顏色(最多設置四種) ?????????? 3.enabled? bool??設置是否啟動下拉刷新的功能 ?????????? 4.progressBackgroundColor??ColorPropType???設置設置下拉刷新加載進去指示器的背景顏色 ?????????? 5.refreshing bool???設置當前進去指示器是否在活躍狀態，也表明當前是不是在下拉刷新狀態 ?????????? 6.size??RefreshLayoutConsts.SIZE.DEFAULT??下拉刷新指示器的尺寸大小，詳細請查看PullToRefreshViewAndroid.SIZE值([點擊進入](https://github.com/facebook/react-native/blob/master/Libraries/PullToRefresh/PullToRefreshViewAndroid.android.js)) # (三)使用實例 ??????上面已經基本介紹了PullToRefreshAndroidView的的基本介紹和相關屬性介紹，下面我們來用一個實例來具體演示一下該組件的具體使用。 該實例從官方實例中進行修改而來，具體代碼如下: ~~~ 'use strict'; const React =require('react-native'); const { AppRegistry, ScrollView, StyleSheet, PullToRefreshViewAndroid, Text, View, } = React; const styles =StyleSheet.create({ row: { borderColor: 'red', borderWidth: 2, padding: 20, backgroundColor: '#3ad734', margin: 5, }, text: { alignSelf: 'center', color: '#fff', }, layout: { flex: 1, }, scrollview: { flex: 1, }, }); const Row =React.createClass({ render: function() { return ( <View style={styles.row}> <Text style={styles.text}> {this.props.data.text } </Text> </View> ); }, }); constPullToRefreshDemo = React.createClass({ getInitialState() { return { isRefreshing: false, loaded: 0, rowData: Array.from(new Array(20)).map( (val, i) => ({text:'初始行' + i}) ), }; }, render() { const rows = this.state.rowData.map((row,ii) => { return <Row key={ii} data={row} />; }); return ( <PullToRefreshViewAndroid style={styles.layout} refreshing={this.state.isRefreshing} onRefresh={this._onRefresh} colors={['#ff0000', '#00ff00','#0000ff','#123456']} progressBackgroundColor={'#ffffff'} > <ScrollViewstyle={styles.scrollview}> {rows} </ScrollView> </PullToRefreshViewAndroid> ); }, _onRefresh() { this.setState({isRefreshing: true}); setTimeout(() => { // 進行準備5項新數據 const rowData = Array.from(new Array(5)) .map((val, i) => ({ text: '下拉刷新行' + (+this.state.loaded + i) })) .concat(this.state.rowData); this.setState({ loaded: this.state.loaded + 5, isRefreshing: false, rowData: rowData, }); }, 5000); }, }); AppRegistry.registerComponent('PullToRefreshDemo',() => PullToRefreshDemo); ~~~ 具體運行效果如下:  # (四)最后總結 ??????????今天我們主要學習一下PullToRefreshAndroidView組件的基本介紹和實例演示使用。大家有問題可以加一下群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)