如何从动态数量的子组件Shared Value更新父组件的Shared Value？

问题场景 #

父组件Parent需要渲染指定数量的Slider子组件，每个滑块拖动范围0-10，父组件需实时展示所有滑块的数值总和。现有代码使用Reanimated实现滑块动画，但遇到React Hook规则限制，无法动态创建共享值来维护每个滑块的数值，导致总和无法实时更新。

可行实现方案 #

核心思路是父组件统一维护所有滑块的数值共享值数组，子组件通过索引操作对应位置的共享值，父组件通过useDerivedValue实时计算总和。此方案既符合React Hook规则，又能利用Reanimated的原生动画性能。

修改后的父组件代码

import { useSharedValue, useDerivedValue } from 'react-native-reanimated';
import ReText from 'react-native-reanimated-text';

function Parent({ numChildren }) {
  // 初始化共享值数组，每个元素对应一个滑块的数值，初始为0
  const sliderValues = useSharedValue(
    Array.from({ length: numChildren }, () => 0)
  );

  // 实时计算总和
  const sumText = useDerivedValue(() => {
    const total = sliderValues.value.reduce((acc, val) => acc + val, 0);
    return `Sum: ${total.toFixed(2)}`; // 保留两位小数优化显示
  });

  return (
    <>
      <ReText text={sumText} />
      {Array.from({ length: numChildren }).map((_, index) => (
        <Slider 
          key={index} 
          index={index} 
          sliderValues={sliderValues} 
        />
      ))}
    </>
  );
}

修改后的子组件代码

import { Dimensions, View } from 'react-native';
import { useSharedValue, useMemo, useAnimatedStyle, interpolate } from 'react-native-reanimated';
import { GestureDetector, Gesture } from 'react-native-gesture-handler';

const WINDOW_WIDTH = Dimensions.get("window").width;
const MAX_SLIDER_VALUE = 10;

function Slider({ index, sliderValues }) {
  const translateX = useSharedValue(0);
  const startX = useSharedValue(0);

  // 手势处理，添加边界限制
  const gesture = useMemo(
    () =>
      Gesture.Pan()
        .onUpdate((e) => {
          // 限制滑块在0到窗口宽度范围内
          const newTranslateX = Math.max(0, Math.min(WINDOW_WIDTH, startX.value + e.translationX));
          translateX.value = newTranslateX;
          // 实时更新对应索引的滑块数值
          sliderValues.value[index] = interpolate(
            newTranslateX,
            [0, WINDOW_WIDTH],
            [0, MAX_SLIDER_VALUE]
          );
        })
        .onEnd(() => {
          startX.value = translateX.value;
        }),
    [index, sliderValues]
  );

  const handleStyle = useAnimatedStyle(() => {
    return {
      transform: [{ translateX: translateX.value }],
      width: 40,
      height: 40,
      backgroundColor: '#2196F3',
      borderRadius: 20
    };
  });

  return (
    <View style={{ 
      width: WINDOW_WIDTH, 
      height: 60, 
      borderBottomWidth: 1, 
      borderColor: '#eee', 
      alignItems: 'center',
      justifyContent: 'center'
    }}>
      <GestureDetector gesture={gesture}>
        <Animated.View style={handleStyle} />
      </GestureDetector>
    </View>
  );
}

方案说明 #

1. 父组件逻辑：

   • 用useSharedValue创建一个长度为numChildren的数组，每个元素对应一个滑块的初始数值0
   • 通过useDerivedValue遍历数组计算总和，确保数值变化时实时更新求和文本

2. 子组件逻辑：

   • 接收父组件传递的index和sliderValues数组，拖动滑块时直接更新对应索引的共享值
   • 添加了滑块的边界限制，确保拖动范围在窗口宽度内，对应数值0-10
   • 手势处理中实时同步滑块数值到父组件的共享值数组，避免额外的状态同步开销

此方案完全符合React Hook规则（所有Hook都在组件顶层调用），同时利用Reanimated的原生线程计算，保证动画和求和更新的流畅性。

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