React-Native元素在滚动时更改大小

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

const MyScrollView = () => {
  const [scrollY] = useState(new Animated.Value(0));

  const handleScroll = Animated.event(
    [{ nativeEvent: { contentOffset: { y: scrollY } } }],
    { useNativeDriver: true }
  );

  return (
    <ScrollView onScroll={handleScroll}>
      {/* 其他元素 */}
    </ScrollView>
  );
};

const MyScrollView = () => {
  // ...

  const handleScroll = Animated.event(
    // ...
  );

  const elementSize = scrollY.interpolate({
    inputRange: [0, 100], // 定义滚动位置的范围
    outputRange: [100, 50], // 定义元素大小的范围
    extrapolate: 'clamp' // 超出范围时限制大小在范围内
  });

  return (
    <ScrollView onScroll={handleScroll}>
      <Animated.View style={{ width: elementSize, height: elementSize }}>
        {/* 元素内容 */}
      </Animated.View>
    </ScrollView>
  );
};