【React Native】文件翻譯閱讀紀錄 - Components(組件) - RefreshControl
Facebook Open Source React Native |
RefreshControl
此組件在ScrollView或ListView中使用,以添加pull to refresh功能。當ScrollView處於scrollY:0時,向下滑動會觸發onRefresh事件。
用法示例
用法示例
class RefreshableList extends Component {
constructor(props) {
super(props);
this.state = {
refreshing: false,
};
}
_onRefresh = () => {
this.setState({refreshing: true});
fetchData().then(() => {
this.setState({refreshing: false});
});
}
render() {
return (
<FlatList
refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this._onRefresh}
/>
}
...
/>
);
}
...
}
注意:刷新是一個受控的道具,這就是為什麼它需要在onRefresh函數中設置為true,否則刷新指示器將立即停止。
Props
refreshing
onRefresh
colors
enabled
progressBackgroundColor
progressViewOffset
size
tintColor
title
titleColor
參考
Props
refreshing
視圖是否應指示活動刷新。
TYPE | REQUIRED |
---|---|
bool | Yes |
onRefresh
視圖開始刷新時調用。
TYPE | REQUIRED |
---|---|
function | No |
colors
將用於繪製刷新指示符的顏色(至少一個)。
TYPE | REQUIRED | PLATFORM |
---|---|---|
array of color | No | Android |
enabled
是否啟用了pull to refresh功能。
TYPE | REQUIRED | PLATFORM |
---|---|---|
bool | No | Android |
progressBackgroundColor
刷新指示器的背景顏色。
TYPE | REQUIRED | PLATFORM |
---|---|---|
color | No | Android |
progressViewOffset
進度視圖頂部偏移
TYPE | REQUIRED | PLATFORM |
---|---|---|
number | No | Android |
size
刷新指示符的大小,請參見RefreshControl.SIZE。
TYPE | REQUIRED | PLATFORM |
---|---|---|
enum(RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE) | No | Android |
tintColor
刷新指示器的顏色。
TYPE | REQUIRED | PLATFORM |
---|---|---|
color | No | iOS |
title
刷新指示下顯示的標題。
TYPE | REQUIRED | PLATFORM |
---|---|---|
string | No | iOS |
titleColor
標題顏色。
TYPE | REQUIRED | PLATFORM |
---|---|---|
color | No | iOS |
0 意見