# 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.

````js
// 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>
    )
}
````

## API

| Argument     | Description                                                    | Type     | Default |
| ------------ | -------------------------------------------------------------- | -------- | ------- |
| isRefreshing | show, or not                                                   | false    |
| onRefresh    | refresh event                                                  | Function |
| style        | style must be declared wide, otherwise it may not be displayed | object   |


## The Other
- Chat with <a href="dingtalk://dingtalkclient/action/sendmsg?dingtalk_id=kjwo3w5">@翊晨[yichen]</a> in Dingtalk desktop App <a href='https://tms.dingtalk.com/markets/dingtalk/download'>Download</a>
- DingTalk Group

<img src="https://img.alicdn.com/tfs/TB101EESpXXXXXFXpXXXXXXXXXX-1122-1362.jpg" width="260" />