在React Native中测量组件和视口顶部之间的距离，并使用滚动/布局更改进行更新？

import { Dimensions } from 'react-native';

const { height } = Dimensions.get('window');

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

const MyComponent = () => {
  const [componentHeight, setComponentHeight] = useState(0);

  const handleLayout = (event) => {
    const { height } = event.nativeEvent.layout;
    setComponentHeight(height);
  };

  return (
    <View onLayout={handleLayout}>
      {/* 组件内容 */}
    </View>
  );
};

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

const MyComponent = () => {
  const [scrollOffset, setScrollOffset] = useState(0);

  const handleScroll = (event) => {
    const { contentOffset } = event.nativeEvent;
    setScrollOffset(contentOffset.y);
  };

  return (
    <ScrollView onScroll={handleScroll}>
      <View style={{ marginTop: scrollOffset + componentHeight }}>
        {/* 组件内容 */}
      </View>
    </ScrollView>
  );
};