基于ScrollView的下拉刷新

组件

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 (<ScrollViewstyle={{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>