React Native:动画回调在使用钩子时不访问最新状态

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

const MyComponent = () => {
  const [animation] = useState(new Animated.Value(0));

  useEffect(() => {
    const animate = () => {
      Animated.timing(animation, {
        toValue: 1,
        duration: 1000,
        useNativeDriver: true,
      }).start();
    };

    animate();
  }, [animation]);

  return (
    <View>
      <Animated.View
        style={{
          opacity: animation,
          transform: [
            {
              translateY: animation.interpolate({
                inputRange: [0, 1],
                outputRange: [100, 0],
              }),
            },
          ],
        }}
      >
        <Text>Animated Text</Text>
      </Animated.View>
    </View>
  );
};

export default MyComponent;