与子组件共享动画值- React reanimated 2

import { createContext, useContext, useEffect } from 'react';
import { useSharedValue } from 'react-native-reanimated';

const AnimationContext = createContext();

const ParentComponent = () => {
  const animatedValue = useSharedValue(0);

  return (
    <AnimationContext.Provider value={animatedValue}>
      {/* 子组件 */}
      <ChildComponent />
    </AnimationContext.Provider>
  );
};

import { useContext } from 'react';
import { View, Animated } from 'react-native';

const ChildComponent = () => {
  const animatedValue = useContext(AnimationContext);

  useEffect(() => {
    // 在这里可以使用动画值执行动画操作
    // 例如，使用动画值设置元素的透明度
    Animated.timing(animatedValue, {
      toValue: 1,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  }, []);

  return (
    <Animated.View style={{ opacity: animatedValue }}>
      {/* 子组件内容 */}
    </Animated.View>
  );
};