React Reanimated 2 如何向兄弟组件传递动画值实现滚动联动动画

首先你当前用state传递动画值的问题在于：Reanimated的动画值默认运行在UI线程，通过React state传递会强制每次更新走JS线程触发全组件重渲染，不仅会出现动画卡顿丢帧，也违背了Reanimated的性能优化设计。

正确实现可以通过共享值（SharedValue）跨组件传递引用的方案完成，全程不需要触发React组件重渲染，所有更新都在UI线程完成，具体步骤如下：

• 首先在两个兄弟组件的公共父层初始化Reanimated共享值，用来存储滚动Y轴偏移量：
  const scrollY = useSharedValue(0);
  直接将scrollY引用作为props分别传给滚动组件、要执行动画的兄弟组件即可，不要传递scrollY.value。
• 滚动组件侧直接绑定滚动事件到共享值，不需要走state更新：
  给Animated.ScrollView配置onScroll参数：

  onScroll={Animated.event(
    [{ nativeEvent: { contentOffset: { y: scrollY.value } } }],
    { useNativeDriver: true }
  )}
  

  滚动时Y轴偏移量会直接在UI层更新到共享值，不会触发任何JS线程的重渲染逻辑。
• 兄弟组件侧拿到scrollY引用后，直接用useAnimatedStyle绑定高度动画即可：

  import Animated, { useAnimatedStyle, interpolate, Extrapolate } from 'react-native-reanimated';
  
  // 组件内部
  const animatedStyle = useAnimatedStyle(() => {
    // 可根据需求调整插值区间，示例为滚动0~100区间内，高度从120降到60，超出范围后锁定值
    const targetHeight = interpolate(
      scrollY.value,
      [0, 100],
      [120, 60],
      Extrapolate.CLAMP
    );
    return {
      height: targetHeight
    };
  });
  
  // 绑定到Animated.View
  return <Animated.View style={[普通样式, animatedStyle]} />
  

如果兄弟组件层级较深，不想逐层传递props，也可以把scrollY共享值存入React Context，后代组件直接从Context取引用即可，效果和props传递完全一致。

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