ReactNative进阶（十七）：RefreshControl组件实现刷新效果-蒲公英云

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

梦里梦外; 2023-01-19 10:58 86阅读 0赞

文章目录

- 一、简介
- 二、API
- 三、应用示例

一、简介

刷新功能在数据更新的时候很常用，它对用户有一个非常明显的数据正在更新的提示信息。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);