React Native控制項之PullToRefreshViewAndroid下拉重新整理組件講解

React Native控制項之PullToRefreshViewAndroid下拉重新整理組件講解
(一)前言

今天我們一起來看一下PullToRefreshViewAndroid下拉重新整理組件講解以及使用執行個體

剛建立的React Native技術交流群(282693535),歡迎各位大牛,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)

2.colors[ColorPropType] 設定下拉重新整理載入進度列指示器的顏色，可以設定多多種顏色(最多設定四種)

3.enabled bool 設定是否啟動下拉重新整理的功能

4.progressBackgroundColorColorPropType 設定設定下拉重新整理載入進去指標的背景顏色

5.refreshing bool 設定當前進去指標是否在活躍狀態，也表明當前是不是在下拉重新整理狀態

6.sizeRefreshLayoutConsts.SIZE.DEFAULT下拉重新整理指標的尺寸大小，詳細請查看PullToRefreshViewAndroid.SIZE值(點擊進入)

(三)使用執行個體

上面已經基本介紹了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 (                              {this.props.data.text }                      );  },});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 ;    });    return (                        {rows}                  );  },   _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)或者底下進行回複一下。