基礎篇章：關於 React Native 之 RefreshControl 元件的講解

阿新 • • 發佈：2022-04-28

（友情提示：RN學習，從最基礎的開始，大家不要嫌棄太基礎，會的同學請自行略過，希望不要耽誤已經會的同學的寶貴時間）

我們已經講完了 ScrollView 和 ListView ，自然而然我們就應該講的元件就是下拉重新整理的嘍，因為它們幾個是兄弟，常常一塊出現，就跟打麻將似的，四缺一不能打，那它們三就是鬥地主，三缺一不能玩。今天講的這個元件就是它們的兄弟：RefreshControl 。

介紹

我的母親官網是這麼介紹我的，說：我是大家在使用我的兄弟ScrollView或ListView新增拉重新整理功能用的，我們幾個好兄弟常常在一起玩。當我的兄弟ScrollView中 scrollY:0時,觸發一個onRefresh事件，我就開始工作，下拉重新整理起來。

注意：refreshing 是一個你們可以控制我的屬性，這就是為什麼你們在使用onRefresh方法時，必須設定為 true，否則，我會立刻停止重新整理，不跟你們玩了。

我的特性

一如既往的，想要跟我玩，而且要玩的好，必須先得了解我的性格和特點才行，知己知彼，才能運用自如嘛。我這人，比較自信，所以不怕把我的弱點和特點透漏給敵人。

onRefresh function 當檢視開始重新整理的時候回撥
refreshing bool 檢視是否應該在重新整理時顯示重新整理的指示器。
colors [color] android專有指定重新整理指示器的顏色，至少設定一種顏色，最多可設定四種顏色，相當於android中的refreshLayout

enabled bool android 是否啟用下拉重新整理功能
progressBackgroundColor color android 重新整理指示器的背景色
progressViewOffset number android 進度檢視離頂部的偏移量
size enum(RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE) android 重新整理指示器的大小
tintColor color ios 重新整理指示器的顏色
title string ios 重新整理指示器下面展示的文字
titleColor color ios title的顏色

如何和我玩

來，看看我的直觀魅力美化效果圖：

邏輯程式碼實現

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  ListView,
  Image,
  TouchableHighlight,
  RefreshControl,
  View
} from 'react-native';

class RefreshControlDemo extends Component {
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      isRefreshing: false,
      dataSource: ds.cloneWithRows(this._genRows(-1)),
    };
  }

  _genRows(flag){
        const dataBlob = [];
        for(let i = 0 ; i< 88 ; i ++ ){
          if(i == flag){
            dataBlob.push("非著名程式設計師+我被打了"+i);
          }else{
             dataBlob.push("非著名程式設計師"+i);
          }
        }
        return dataBlob;
    }

  render() {
    return (
        <ListView
          dataSource={this.state.dataSource}
          renderRow={this._renderRow.bind(this)}
          refreshControl={
          <RefreshControl
            refreshing={this.state.isRefreshing}
            onRefresh={this._onRefresh.bind(this)}
            tintColor="#ff0000"
            colors={['#ff0000', '#00ff00', '#0000ff']}
            progressBackgroundColor="#ffff00"
            enabled={true}  
          />
        }
        />
    );
  }

  _renderRow (rowData,sectionID, rowID) {
    return (
        <TouchableHighlight onPress={() => {
          this._pressRow(rowData,rowID);
        }}
        underlayColor='red'
        >
          <View>
            <View style={styles.row}>
              <Image style={{width:40,height:40}} source={require('./Thumbnails/head.jpg')}/>
              <Text style={{flex:1,fontSize:20,marginLeft:20}}>
                {rowData}
              </Text>
            </View>
          </View>
        </TouchableHighlight>
    );
   }

  _pressRow(rowData,rowID){
        alert(rowData);
        this.setState({dataSource: this.state.dataSource.cloneWithRows(
        this._genRows(rowID))});
    }

    _refreshRows(){
        const dataBlob = [];
        for(let i = 0 ; i< 8 ; i ++ ){
            dataBlob.push("我愛非著名程式設計師");
        }
        return dataBlob;
    }


    _onRefresh(){
      this.setState({isRefreshing: true});
      setTimeout(() => {
      this.setState({
        isRefreshing: false,
        dataSource: this.state.dataSource.cloneWithRows(
        this._refreshRows())
      });
    }, 5000);
    }
}

const styles = StyleSheet.create({
    container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems:'center',
    padding: 10,
  },
});

AppRegistry.registerComponent('RefreshControlDemo', () => RefreshControlDemo);

今天我們講的這個demo例子，我用的是ListView和RefreshControl搭配使用，因為官網的例子是ScrollView和RefreshControl的搭配使用。所以關於ScrollView和RefreshControl怎麼使用，大家請移步官網，看例子，我這裡就不重複介紹了。官方例子地址：https://facebook.github.io/react-native/docs/refreshcontrol.html