react native ui框架，【React Native開發】React Native控件之RefreshControl組件具體解釋(21)

2023-12-06 阅读 25 评论 0

摘要：轉載請標明出處：http://blog.csdn.net/developer_jiangqq/article/details/50672747本文出自:【江清清的博客】(一)前言?????????【好消息】個人站點已經上線執行,后面博客以及技術干貨等精彩文章會同步更新，請大家關注收藏:http://www.lcode.org???????? ? ?

轉載請標明出處：

http://blog.csdn.net/developer_jiangqq/article/details/50672747

本文出自:【江清清的博客】

(一)前言

?????????【好消息】個人站點已經上線執行,后面博客以及技術干貨等精彩文章會同步更新，請大家關注收藏:http://www.lcode.org???????

? ? ? ?今天我們一起來看一下RefreshControl下拉刷新組件解說以及使用實例

?????????剛創建的React Native技術交流3群(496508742),React Native技術交流4群(458982758)，請不要反復加群！歡迎各位大牛,React Native技術愛好者加入交流!同一時候博客左側歡迎微信掃描關注訂閱號,移動技術干貨,精彩文章技術推送!

????????? 該組件和上一篇組將的PullToRefreshAndroidView組件相相似(點擊進入)。也是實現下拉刷新的功能。只是該組件是用在ScrollView的內部的，為ScrollView加入一個下拉刷新的功能。

當ScrollView的垂直方向的偏移量scrollY:0的時候，手指往下拖拽ScrollView就會觸發onRefresh事件方法。

(二)屬性方法

onRefresh? function方法當視圖開始刷新的時候調用
refreshing? bool? 決定載入進去指示器是否為活躍狀態，也表名當前是否在刷新中
colors [ColorPropType]?? android平臺適用? 進行設置載入進去指示器的顏色，至少設置一種。最好能夠設置4種
enabled? bool?? android平臺適用?? 用來設置下拉刷新功能是否可用
progressBackgroundColor ColorPropType? 設置載入進度指示器的背景顏色
size RefreshLayoutConsts.SIZE.DEFAULT? android平臺適用? 載入進度指示器的尺寸大小，詳細能夠查看RefreshControl.SIZE(詳細點擊進入)
tintColor ColorPropType?? iOS平臺適用? 設置載入進度指示器的顏色
title string iOS平臺適用? 設置載入進度指示器以下的標題文本信息

(三)使用實例

???????? 上面已經對于RefreshControl組件的基本介紹以及相關屬性做了說明，以下來進行實例使用一下。以下代碼在官方實例中進行改動而來，還是比較簡單的。

詳細代碼例如以下:

'use strict';const React =require('react-native');
const {AppRegistry,ScrollView,StyleSheet,RefreshControl,Text,View,
} = React;const styles =StyleSheet.create({row: {borderColor: 'red',borderWidth: 5,padding: 20,backgroundColor: '#3a5795',margin: 5,},text: {alignSelf: 'center',color: '#fff',},scrollview: {flex: 1,},
});const Row =React.createClass({_onClick: function() {this.props.onClick(this.props.data);},render: function() {return (<View style={styles.row}><Text style={styles.text}>{this.props.data.text}</Text></View>);},
});constRefreshControlDemo = 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 (<ScrollViewstyle={styles.scrollview}refreshControl={<RefreshControlrefreshing={this.state.isRefreshing}onRefresh={this._onRefresh}colors={['#ff0000', '#00ff00','#0000ff','#3ad564']}progressBackgroundColor="#ffffff"/>}>{rows}</ScrollView>);},_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('RefreshControlDemo',() => RefreshControlDemo);

react native ui框架，

詳細執行效果例如以下: