基于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 (
    <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>