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

博文目录

• • 一、简介
    • 二、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


### 最后

小编综合了阿里的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://img-blog.csdnimg.cn/img_convert/45f2869b91b538dd3bb3290ba13bc806.png)  

![](https://img-blog.csdnimg.cn/20210419193354991.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0tlcGxlcl9JSQ==,size_16,color_FFFFFF,t_70)

虽只说了一个公司的面试，但我们可以知道大厂关注的东西并举一反三，通过一个知识点延伸到另一个知识点，这是我们要掌握的学习方法，小伙伴们在这篇有学到的请评论点赞转发告诉小编哦，谢谢大家的支持！