ReactNative 进阶（十七）：RefreshControl 组件实现刷新效果

2022 年 1 月 15 日
本文字数：1787 字
阅读完需：约 6 分钟

一、简介

刷新功能在数据更新的时候很常用，它对用户有一个非常明显的数据正在更新的提示信息。ReactNative提供了RefreshControl组件来实现刷新功能。

RefreshControl组件可以用在ScrollView或ListView内部，为其添加下拉刷新的功能。当ScrollView处于竖直方向的起点位置（scrollY: 0），此时下拉会触发一个onRefresh事件。

二、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/index.android.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);