RefreshControl
参考文档
这一组件可以用在 ScrollView 或 FlatList 内部，为其添加下拉刷新的功能。当 ScrollView 处于竖直方向的起点位置（scrollY: 0），此时下拉会触发一个onRefresh事件。
查看 Props
| 属性 | 类型 | 必填 | 描述 |
|---|---|---|---|
| refreshing | bool | 是 | 视图是否应该在刷新时显示指示器。 |
| onRefresh | onRefresh | 否 | 在视图开始刷新时调用。 |
| colors | array of color | 否 | 指定至少一种颜色用来绘制刷新指示器。（Android） |
| enabled | bool | 否 | 指定是否要启用刷新指示器（Android） |
| progressBackgroundColor | color | 否 | 指定刷新指示器的背景色。（Android） |
| progressViewOffset | progressViewOffset | 否 | 指定刷新指示器的垂直起始位置(top offset)。（Android） |
| size | enum(RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE) | 否 | 指定刷新指示器的大小，具体数值可参阅 RefreshControl.SIZE.（Android） |
| tintColor | color | 否 | 指定刷新指示器的颜色。（Android） |
| title | string | 否 | 指定刷新指示器下显示的文字（ios） |
| 指定刷新指示器下显示的文字 | color | 否 | 指定刷新指示器下显示的文字的颜色。（ios） |
Example
示例
import React from 'react';
import {
ScrollView,
RefreshControl,
StyleSheet,
Text,
SafeAreaView,
} from 'react-native';
import Constants from 'expo-constants';
const wait = (timeout) => {
return new Promise(resolve => {
setTimeout(resolve, timeout);
});
}
const App = () => {
const [refreshing, setRefreshing] = React.useState(false);
const onRefresh = React.useCallback(() => {
setRefreshing(true);
wait(2000).then(() => setRefreshing(false));
}, []);
return (
<SafeAreaView style={styles.container}>
<ScrollView
contentContainerStyle={styles.scrollView}
refreshControl={
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
}
>
<Text>Pull down to see RefreshControl indicator</Text>
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: Constants.statusBarHeight,
},
scrollView: {
flex: 1,
backgroundColor: 'pink',
alignItems: 'center',
justifyContent: 'center',
},
});
export default App;