RefreshControl 下拉刷新组件 >=v1.0.0

这一组件用在 ScrollView 内部,作为 refreshControl 属性,为其添加下拉刷新的功能。

该组件分为五种展示状态:

  • PULLSTART:正在下拉,并未达到刷新所需高度,默认文本是『下拉可以刷新』
  • PULLCONTINUE:正在下拉,并且达到了刷新所需高度,默认文本是『松开即可刷新』
  • REFRESHING:正在刷新,此时用户已经松手,显示正在刷新状态,默认文本是『努力加载中』
  • SUCCESS:刷新结束,加载成功,默认文本是『加载成功』(1.3.0开始支持)
  • FAIL:刷新结束,加载失败,默认文本是『加载失败』(1.3.0开始支持)

当变成 REFRESHING 状态会触发 onRefresh 事件,此时,可以通过 ScrollViewstopRefreshing 方法来停止刷新。

RefreshControl

属性

height { number }

RefreshControl的高度,下拉距离超过该距离时松手,会开始刷新

默认值: 35

pullStartContent { string }

正在下拉,未达到刷新高度时的文本

默认值: '下拉可以刷新'

pullContinueContent { string }

正在下拉,达到刷新高度时的文本

默认值: '松开即可刷新'

pullIcon { string } >=1.3.0

PULLSTART和PULLCONTINUE时旋转的icon

默认值: '\uf07b'

refreshingContent { string }

正在刷新时的文本

默认值: '努力加载中'

refreshingIcon { string } >=1.3.0

REFRESHING时的旋转的icon文本

默认值: '\uf089'

successContent { string } >= 1.3.0

加载成功时的文本

默认值: '加载成功'

successIcon { string } >=1.3.0

加载成功时的icon文本

默认值: '\uf078'

failContent { string } >= 1.3.0

加载失败时的文本

默认值: '加载失败'

failIcon { string } >=1.3.0

加载失败时的icon文本

默认值: '\uf077'

onRefresh { function }

切换到正在刷新状态时触发的事件

style { View.propTypes.style }

RefreshControl 容器样式

iconStyle { Text.propTypes.style }

RefreshControl iconfont样式

textStyle { Text.propTypes.style }

RefreshControl 提示文字样式

示例

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

const styles = StyleSheet.create({
    operationContainer: {
        paddingHorizontal: 10,
        marginBottom: 10,
        flexDirection: 'row',
        height: 30,
    },
    operationText: {
        flex: 1,
        alignSelf: 'center',
    },
    operationTextHighlight: {
        color: '#1ba9ba',
    },
    itemText: {
        padding: 5,
        color: '#fff',
        alignSelf:'flex-end',
        fontSize: 32,
        fontWeight: 'bold'
    }
});

class RefreshControlExample extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            listData: getCoupleOfRandomColor(20),
        }
    }

    onRefresh() {
        setTimeout(()=>{
            this.setState({
                listData: getCoupleOfRandomColor(20),
            });

            let _random = Math.random();
            this.refs.ScrollView.stopRefreshing({
                result: _random > 0.6 ? undefined : _random < 0.3 ? true : false,
                duration: 3000,
            });
        }, 3000);
    }

    render() {
        var listContent = this.state.listData.map((item, index)=>{
            return (
                <View style={{height: 50, backgroundColor: item}} key={index}>
                    <Text style={styles.itemText}>{index}</Text>
                </View>
            )
        })

        var refreshControl = <RefreshControl
            height={50}
            pullStartContent='自定义下拉文字'
            pullContinueContent='自定义继续拉动文字'
            refreshingContent='自定义刷新文字'
            successContent='自定义成功文字'
            failContent='自定义失败文字'
            style={{borderWidth: 2, borderColor: 'blue', height: 100}}
            iconStyle={{color: 'blue'}}
            textStyle={{color: 'blue'}}
            onRefresh={this.onRefresh.bind(this)} />

        return (
            <View style={{flex: 1, paddingTop: 10}}>
                <View style={styles.operationContainer}>
                    <Text style={styles.operationText}>强制刷新</Text>
                    <Button text='强制刷新' onPress={() => this.refs.ScrollView.startRefreshing()} />
                </View>
                <View style={styles.operationContainer}>
                    <Text style={styles.operationTextHighlight}>- 可以自定义内容和样式</Text>
                </View>
                <View style={styles.operationContainer}>
                    <Text style={styles.operationTextHighlight}>- 可以设置刷新结果(成功/失败/默认无)</Text>
                </View>
                <View style={styles.operationContainer}>
                    <Text style={styles.operationTextHighlight}>- 可以设置刷新之后回到顶部是否需要动画和动画时间</Text>
                </View>
                <ScrollView
                    ref='ScrollView'
                    style={{borderTopWidth: 1, borderBottomWidth: 1, borderColor: '#ffffff'}}
                    refreshControl={refreshControl} >
                    {listContent}
                </ScrollView>
            </View>
        )
    }
}

function getCoupleOfRandomColor(num) {
    var colors = [];

    for(var i = 0; i < num; i++) {
        colors.push(getRandomColor());
    }

    return colors;
}

function getRandomColor() {
    var letters = '3456789ABC'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 10)];
    }
    return color;
}

module.exports = {
    title: 'RefreshControl',
    examples: [{
        render: () => {
            return (
                <RefreshControlExample />
            );
        },
    }]
};