ReactNative: 使用刷新組件RefreshControl組件

一、簡介

刷新功能在數據更新的時候很常用，它對用戶有一個非常明顯的數據正在更新的提示信息。ReactNative中提供了RefreshControl組件來實現這個刷新功能。在前面介紹的ScrollView或ListView，都支持刷新組件的使用，可添加拉動刷新功能。

 

二、API

它是跨平台的組件，提供的屬性如下：

//視圖下拉開始刷新時調用。
onRefresh: React.PropTypes.func

//該視圖是否應指示活動刷新。
refreshing: React.PropTypes.bool.isRequired

//刷新指示器的顏色。@platform ios
tintColor: ColorPropType

//刷新文案的顏色。@platform ios
titleColor: ColorPropType

//標題顯示在刷新指示器下方。@platform ios
title: React.PropTypes.string

//是否啟用拉動刷新功能。@platform android
enabled: React.PropTypes.bool

//用於繪制刷新指示器的顏色（至少一種）。@platform android
colors: React.PropTypes.arrayOf(ColorPropType)

//刷新指示器的背景色。@platform android
progressBackgroundColor: ColorPropType

//刷新指示器的大小，請參見RefreshControl.SIZE。@platform android
size: React.PropTypes.oneOf([RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE])

//進度視圖頂部偏移。@platform android
progressViewOffset: React.PropTypes.number

 

三、使用

了解了api，簡單示例如下：

ScrollRefreshControl.js

import React, { Component } from 'react';

import {
    StyleSheet,
    ScrollView,
    Text,
    RefreshControl
} from 'react-native';

export default class ScrollRefreshControl extends Component{

    //state數據
    state = { text: '初始狀態', refreshing: false };

    //下拉視圖開始刷新時調用
    _onRefresh() {

        if (this.state.refreshing === false) {
            this._updateState('正在刷新......', true);

            //5秒后結束刷新
            setTimeout( ()=>{
                this._updateState('結束狀態', false)
            }, 5000)

        }
    }

    //更新State
    _updateState(message, refresh){
        this.setState({text:message,refreshing: refresh});
    }

    render(){
        return (
            <ScrollView
                style={[styles.flex,styles.bgColor]}
                contentContainerStyle={{flex: 1, alignItems: 'center',justifyContent: 'center'}}
                indicatorStyle={'black'}
                showsHorizontalScrollIndicator={true}
                bounces={true}
                refreshControl={
                    <RefreshControl
                        tintColor={'red'}
                        titleColor={'brown'}
                        title={'正在刷新......'}
                        refreshing={this.state.refreshing}
                        onRefresh={this._onRefresh.bind(this)}
                    />
                }
            >
                <Text>{this.state.text}</Text>
            </ScrollView>
        )
    }
}

const styles = StyleSheet.create({
    flex: {
        flex: 1
    },
    bgColor: {
        backgroundColor:'#EEE'
    }
});

index.ios.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';

import {
    AppRegistry,
    StyleSheet,
    View
} from 'react-native';
import ScrollRefreshControl from "./src/ScrollRefreshControl";


export default class ReactNativeDemo extends Component {

    render() {
        return (
            <View style={[styles.flex,styles.bgColor]}>
                <ScrollRefreshControl/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    flex: {
        flex: 1
    },
    bgColor: {
      backgroundColor: 'white'
    }
});

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