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

//刷新文案的颜色。@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'
    }
});



### 最后

整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。


**《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》**

![](https://img-blog.csdnimg.cn/img_convert/f1b8a7b96e3ca32c1cdfd3c04e728b02.webp?x-oss-process=image/format,png)



![前端面试题宝典](https://img-blog.csdnimg.cn/img_convert/f0e5ce74036e7273bb2db95fc1299265.webp?x-oss-process=image/format,png)

![前端校招面试题详解](https://img-blog.csdnimg.cn/img_convert/b9bb17784ab77cdb5c271560f8f6d79d.webp?x-oss-process=image/format,png)

面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》**

[外链图片转存中...(img-iJnDK0sU-1718717124598)]



[外链图片转存中...(img-59fubrxI-1718717124600)]

[外链图片转存中...(img-1vM2NEEk-1718717124601)]