react native 使用ScrollView实现下拉更新，上拉加载更多

在React Native中，要实现下拉更新和上拉加载更多的功能，你需要自定义ScrollView组件，监听滚动事件并根据滚动的位置来判断何时触发更新和加载更多的操作。以下是一个基本的实现思路：

监听滚动事件 ：使用ScrollView的onScroll属性来监听滚动事件。
判断滚动位置 ：在onScroll的回调函数中，通过event.nativeEvent.contentOffset.y来获取滚动的垂直偏移量。
下拉更新 ：当滚动到顶部附近时（即contentOffset.y接近0），触发下拉更新操作。
上拉加载更多 ：当滚动到底部附近时（即contentOffset.y接近contentSize.height - layoutMeasurement.height），触发上拉加载更多操作。

以下是一个简单的代码示例：

jsx 复制代码

import React, { useRef, useEffect, useState } from 'react';
import { ScrollView, View, Text, Button } from 'react-native';

const ScrollableList = () => {
  const scrollViewRef = useRef(null);
  const [data, setData] = useState(initialData); // 初始数据
  const [loading, setLoading] = useState(false); // 加载状态
  const [refreshing, setRefreshing] = useState(false); // 刷新状态

  // 下拉刷新
  const onRefresh = async () => {
    setRefreshing(true);
    // 模拟异步数据加载
    await new Promise((resolve) => setTimeout(resolve, 1000));
    // 更新数据
    setData(newData); // newData 是新的数据
    setRefreshing(false);
  };

  // 上拉加载更多
  const onLoadMore = async () => {
    if (loading) return; // 如果已经在加载中，则不执行
    setLoading(true);
    // 模拟异步数据加载
    await new Promise((resolve) => setTimeout(resolve, 1000));
    // 追加数据
    setData((prevData) => [...prevData, ...moreData]); // moreData 是要追加的数据
    setLoading(false);
  };

  // 滚动监听
  const onScroll = (event) => {
    const { contentOffset, contentSize, layoutMeasurement } = event.nativeEvent;
    const isNearTop = contentOffset.y <= 10; // 10是阈值，可以根据需要调整
    const isNearBottom = contentOffset.y + layoutMeasurement.height >= contentSize.height - 10; // 10是阈值，可以根据需要调整

    if (isNearTop && refreshing === false) {
      onRefresh();
    }

    if (isNearBottom && loading === false) {
      onLoadMore();
    }
  };

  return (
    <ScrollView
      ref={scrollViewRef}
      onScroll={onScroll}
      refreshing={refreshing}
      onRefresh={onRefresh}
      contentContainerStyle={{ paddingVertical: 20 }}
    >
      {data.map((item, index) => (
        <View key={index} style={{ marginBottom: 10 }}>
          <Text>{item}</Text>
        </View>
      ))}
      {loading && <Text>Loading...</Text>}
      <Button
        title="Load More"
        onPress={onLoadMore}
        disabled={loading}
        style={{ marginTop: 10 }}
      />
    </ScrollView>
  );
};

export default ScrollableList;

注意：

上述代码中的initialData、newData和moreData都是示例数据，你需要根据实际情况替换为真实的数据。
阈值（如上述代码中的10）可以根据实际需求进行调整，以优化用户体验。
如果你的列表项高度是固定的，你也可以通过计算列表项的数量来判断是否到达顶部或底部。
上面的代码使用了ScrollView的refreshing和onRefresh属性来实现下拉刷新，这是React Native原生的下拉刷新功能。如果你需要自定义下拉刷新的样式或行为，可以考虑使用第三方库，如react-native-pull-to-refresh。