react native学习笔记12——RefreshControl下拉刷新

本文介绍React Native中的下拉刷新组件RefreshControl的使用方法及其属性。该组件可为ScrollView和FlatList添加下拉刷新功能,支持不同平台的特定配置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

RefreshControl是React Native官方提供的下拉刷新组件,用在ScrollView和FlatList内部,为其添加下拉刷新的功能。它是对原生平台下拉刷新组件的一个封装,使用起来比较方便快捷,体验类似Native的下拉刷新组件,但其缺点是不能进行自定义下拉刷新头部,并且只能使用与ScrollView,FlatList这种带有滚动功能的组件之中。
以ScrollView为例,当ScrollView处于竖直方向的起点位置(scrollY:0),此时下拉会触发一个onRefresh事件。

属性

属性类型描述
onRefreshfunction当视图开始刷新的时候调用
refreshingbool决定加载进去指示器是否为活跃状态,也表名当前是否在刷新中

android平台特有

属性类型描述
colorsColorPropType指定至少一种颜色用来绘制刷新指示器。
enabledbool指定是否要开启刷新指示器。
progressBackgroundColorColorPropType指定刷新指示器的背景色。
sizeRefreshLayoutConsts.SIZE.DEFAULT指定刷新指示器的大小,具体数值可参阅RefreshControl.SIZE.
progressViewOffsetReact.PropTypes.number指定刷新指示器的垂直起始位置(top offset)。

ios平台特有

属性类型描述
tintColorColorPropType指定刷新指示器的颜色。
iostitlestring指定刷新指示器下显示的文字。

使用实例

前面介绍了RefreshControl组件的相关属性,下面用实例演示RefreshControl的具体使用方法。(在官方实例基础上做了ES6语法改造)
以ScrollView为例,在ScrollView中通过设置refreshControl属性来指定RefreshControl组件,用于为ScrollView提供下拉刷新功能,然后设置RefreshControl的onRefresh方法控制刷新时具体操作。

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

class ListRowComponent extends React.Component{
    render(){
        return (
            <View style={styles.row}>
                <Text style={styles.text}>
                    {this.props.data.text}
                </Text>
            </View>
        );
    }
};
export default class RefreshControlDemo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isRefreshing: false,
            loaded: 0,
            rowData: Array.from(new Array(10)).map(
                (val, i) => ({text:  i})),
        };
    }

    render() {
        var rows = this.state.rowData.map((row, indexKey) => {
            return <ListRowComponent key={indexKey} data={row}/>;
        });
        return (
            <ScrollView style={styles.scrollview} refreshControl={  //设置下拉刷新组件
                <RefreshControl
                    refreshing={this.state.isRefreshing}
                    onRefresh={this.onRefresh.bind(this)}  //(()=>this.onRefresh)或者通过bind来绑定this引用来调用方法
                    tintColor='red'
                    title= {this.state.isRefreshing? '刷新中....':'下拉刷新'}
                />
            }>
                {rows}
            </ScrollView>
        );
    }
    onRefresh() {
        this.setState({isRefreshing: true});
        setTimeout(() => {
            // 准备下拉刷新的5条数据
            var rowNewData = 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: rowNewData,
            });
        }, 2000);
    }

}

const styles = StyleSheet.create({
    row: {
        borderColor:'red',
        borderWidth:5,
        padding:20,
        backgroundColor:'#00CCFF',
        margin:5,
    },
    text:{
        alignSelf:'center',
        color:'white',
    },
    scrollerview:{
        flex:1,
    }
});

源码Git地址

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值