如何将@gorhom/bottom-sheet的animatedPosition传递给子组件实现图片动画

核心原因 #

animatedPosition是通过useSharedValue创建的Reanimated共享值，这类值的更新不会触发React组件重渲染，直接作为props传递给子组件后，子组件无法自动感知其实时变化，只能获取初始值。

具体解决方向 #

• 在子组件中用Reanimated API监听共享值变化
  子组件中通过useDerivedValue追踪animatedPosition的实时值，若需在非动画场景（如文本展示）使用，再通过useAnimatedReaction同步到React状态：

  import { useDerivedValue, useAnimatedReaction, runOnJS } from 'react-native-reanimated';
  import { useState } from 'react';
  
  export default function BottomSheetData(props) {
    const { animatedPosition } = props;
  
    // 实时捕获共享值的变化
    const trackedPosition = useDerivedValue(() => animatedPosition.value, [animatedPosition]);
  
    // 若需同步到React状态供非动画逻辑使用
    const [positionState, setPositionState] = useState(0);
    useAnimatedReaction(
      () => trackedPosition.value,
      (newVal) => runOnJS(setPositionState)(newVal),
      []
    );
  }
  

• 直接在动画组件中使用共享值
  如果子组件是用Reanimated的动画组件（如Animated.Image），可直接用animatedPosition.value驱动样式，无需转成React状态，保证实时性：

  import Animated from 'react-native-reanimated';
  import { useAnimatedStyle } from 'react-native-reanimated';
  
  export default function BottomSheetData(props) {
    const { animatedPosition, imga } = props;
  
    const imageAnimatedStyle = useAnimatedStyle(() => ({
      // 根据需求调整动画逻辑，比如 translateY 或 scale
      transform: [{ translateY: animatedPosition.value }]
    }));
  
    return <Animated.Image source={imga} style={[/* 基础样式 */, imageAnimatedStyle]} />;
  }
  

• 避免通过React状态中转共享值
  不要依赖父组件的onChange回调更新React状态（如currentPosition）再传递给子组件，React状态更新是异步的，会导致动画值滞后。直接传递原始的animatedPosition共享值给子组件即可。

• 确认props传递的正确性
  检查父组件中是否确实将animatedPosition传递给了BottomSheetData组件，确保没有漏传或错误传递：

  <BottomSheet
    ref={bottomSheetRef}
    index={1}
    snapPoints={snapPoints}
    animateOnMount={false}
    animatedPosition={animatedPosition}
    onChange={(index) => setCurrentPosition(index)}
  >
    <BottomSheetData
      // ...其他props
      animatedPosition={animatedPosition}
    />
  </BottomSheet>
  

内容的提问来源于stack exchange，提问作者JulesUK