在react本机ScrollView中对滚动出屏幕的组件做出反应

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

const MyScrollView = () => {
  const [isVisible, setIsVisible] = useState(true);

  const handleScroll = (event) => {
    const offsetY = event.nativeEvent.contentOffset.y;
    const screenHeight = event.nativeEvent.layoutMeasurement.height;

    // 判断组件是否滚动出屏幕
    if (offsetY > screenHeight) {
      setIsVisible(false);
    } else {
      setIsVisible(true);
    }
  };

  return (
    <ScrollView onScroll={handleScroll}>
      <View>
        {isVisible && <Text>可见的组件</Text>}
        {!isVisible && <Text>滚动出屏幕的组件</Text>}
      </View>
    </ScrollView>
  );
};

export default MyScrollView;