React Native新版Gesture Handler中onStart实现：替代上下文记录初始位置

我正在把旧版React Native手势处理代码迁移到新版，要实现一个能在屏幕宽度范围内来回滑动的进度滑块。

旧版代码：

const gestureHandler = useAnimatedGestureHandler({
    onStart: (_, ctx) => {
      ctx.startX = x.value;
    },
    onActive: (event, ctx) => {
      x.value = ctx.startX + event.translationX;
    },
    onEnd: (_, ctx) => {
          const thisSnapPoint = snapPoint(ctx.translationX, ctx.velocityX, [0, width]);
          sliderX.value = withSpring(thisSnapPoint);
    },
  });

我尝试转换成新版代码，但新版Gesture.Pan()没有旧版的上下文（ctx）机制，不知道怎么实现onStart来让滑块从上次停留的位置开始滑动：

const panGesture = useMemo(
    () =>
      Gesture.Pan()
        .onStart((e) => {})
        .onChange((e) => {
          startX.value = e.translationX;
        })
        .onEnd((e) => {
          const thisSnapPoint = snapPoint(e.translationX, e.velocityX, [0, width]);
          sliderX.value = withSpring(thisSnapPoint);
        }),
    [],
  );

解决方案 #

新版Gesture Handler确实移除了ctx上下文，但可以用**共享值（Shared Value）**替代原来的ctx存储起始位置，具体实现如下：

1. 定义两个共享值：一个记录滑块当前位置，另一个记录手势开始时的起始位置
2. 在onStart阶段，把当前滑块的位置赋值给起始位置变量
3. 在onChange阶段，用起始位置加上当前手势的偏移量得到新位置，同时限制范围避免滑出边界
4. 结束阶段保留原有的吸附逻辑，基于当前滑块位置计算目标点

完整代码示例：

import { useSharedValue } from 'react-native-reanimated';
import { Gesture } from 'react-native-gesture-handler';

// 定义共享值：滑块当前位置、手势起始位置
const sliderX = useSharedValue(0);
const startX = useSharedValue(0);

const panGesture = useMemo(
  () =>
    Gesture.Pan()
      .onStart(() => {
        // 手势开始时记录滑块当前位置
        startX.value = sliderX.value;
      })
      .onChange((event) => {
        // 计算新位置并限制在0到屏幕宽度之间
        const newX = startX.value + event.translationX;
        sliderX.value = Math.max(0, Math.min(newX, width));
      })
      .onEnd((event) => {
        // 执行吸附动画
        const thisSnapPoint = snapPoint(sliderX.value, event.velocityX, [0, width]);
        sliderX.value = withSpring(thisSnapPoint);
      }),
  [width], // 依赖项加入width，避免闭包导致的宽度值过时
);

关键说明 #

• 共享值(useSharedValue)是新版库中用于跨手势和动画传递状态的核心方式，替代了旧版的ctx临时存储
• onChange阶段的边界限制是必要的，防止滑块滑出屏幕可视范围
• useMemo的依赖数组必须包含width，确保屏幕宽度变化时手势逻辑能同步更新
• 旧版onEnd中使用的ctx.translationX是手势总偏移，新版直接用当前sliderX.value计算吸附点更准确

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