Nuke-refresh-control NPM

RefreshControl

category: Components
chinese: 含 h5 版本的下拉刷新组件
type: Basic

Design

RefreshControl is a sub component that can pull down and refresh, and the parent component can only be <Scrollview> or <ListView>.

In use, it can be directly used as a container, corresponding to the internal rendering logic.

// Please refer to the ScrollView Component Demo

//初始 state
constructor() {
    super();
    this.state={
        isRefreshing: false,
        refreshText: '↓ 下拉刷新',
        data:[
            //...Omit part of the code
        ]
    }
}

handleRefresh =()=>{
    this.setState({
        isRefreshing: true,
        refreshText: '加载中',
    });
    //mock ajax 此处替换为你的 ajax 请求
    setTimeout(() => {
        this.setState({
            isRefreshing: false,
            data: [
                // data 字段变更
            ],
            refreshText: '↓ 下拉刷新',
        });

    }, 1000);
}
render(){
    return(
        <ScrollView>
            <RefreshControl isRefreshing={this.state.isRefreshing} style={{width:750,height:100}} onRefresh={this.handleRefresh}>
                <Text>{this.state.refreshText}</Text>
            </RefreshControl>
            {/* Content */}
        <ScrollView>
    )
}