组件
import React, {useState} from 'react';
import {ScrollView, RefreshControl, Platform} from 'react-native';
const RefreshComponent = ({children, onRefresh, onScroll}) => {
const [refreshing, setRefreshing] = useState(false);
const [iosDis, setIosDis] = useState(0);
const pullDistanceThreshold = 150; // 下拉距离阈值
const handleScroll = event => {
const offsetY = event.nativeEvent.contentOffset.y;
if (offsetY < -pullDistanceThreshold) {
setIosDis(100);
}
onScroll && onScroll(offsetY);
};
const handleMomentumScrollEnd = event => {
const {contentOffset} = event.nativeEvent;
const isScrolling = contentOffset.y < 0;
if (!isScrolling && iosDis >= 100) {
setIosDis(0);
onRefresh && onRefresh();
}
};
const handleRefresh = () => {
const systemType = Platform.OS;
setRefreshing(true);
setTimeout(() => {
setRefreshing(false);
// 模拟异步操作,例如发送网络请求
if (systemType !== 'ios') {
onRefresh && onRefresh();
}
}, 1500);
};
return (
<ScrollView
style={{flex: 1}}
contentContainerStyle={{flexGrow: 1}}
refreshControl={
<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />
}
onScroll={handleScroll}
onMomentumScrollEnd={handleMomentumScrollEnd}
scrollEventThrottle={16}>
{children}
</ScrollView>
);
};
export default RefreshComponent;
使用
1.引入组件
import RefreshComponent from '../../componets/RefreshComponent';
2.使用
<RefreshComponent onRefresh={} onScroll={}>
渲染内容
</RefreshComponent>