react-native - 反应原生手势处理程序 - 多次调整拖动时元素跳跃

Question

我为我的项目构建滑块，滑块工作正常，但每次我调整拖动（使用 Circle 元素）时，圆圈都会跳到他的初始状态let translateX = sub(x, 50 / 2);

请帮助我了解我需要添加什么才能使圆圈从他的最后一个位置继续。

我试图在 onDrop 函数中覆盖 translateX 但它不起作用 ->

() =>  
  cond(  
    eq(state, State.ACTIVE),  
    call([translateX], ([v]) => {  
      onDrop(v);
    }),
  ),
[state, value],
);
const onDrop = (e) => {

const diff = e - -firstNumber;
const lastOption = diff * offSet;
setTextValue((lastOption / 10).toFixed(2));
};

我的代码：

  const width = Dimensions.get('window').width
  const SLIDER_WIDTH = width - 200;
  let offSet = 1000 / SLIDER_WIDTH;
  let firstNumber = SLIDER_WIDTH - 25;
  
  const [state, translationX] = useValues(
    State.UNDETERMINED,
    (-SLIDER_WIDTH + 100) / 2,
  );
  const gestureHandler = onGestureEvent({state, translationX});
  const x = diffClamp(withOffset(translationX, state), -SLIDER_WIDTH + 50, 50);
  let translateX = sub(x, 50 / 2);
  const [textValue, setTextValue] = useState(50);
  const value = round(multiply(divide(x, SLIDER_WIDTH), 100));

  useCode(
    () =>
      cond(
        eq(state, State.ACTIVE),
        call([translateX], ([v]) => {
          onDrop(v);
        }),
      ),
    [state, value],
  );
  const onDrop = (e) => {
    const diff = e - -firstNumber;
    const lastOption = diff * offSet;
    setTextValue((lastOption / 10).toFixed(2));
  };

  return (
    <View>
    <PanGestureHandler
      minDist={0}
      {...gestureHandler}
      onHandlerStateChange={chosenValue}>
      <Animated.View
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: CIRCLE_SIZE,
          height: CIRCLE_SIZE,
          transform: [{translateX}],
        }}>
        <Animated.View
          style={{
            ...StyleSheet.absoluteFillObject,
          }}>
          <Circle {...{state}} />
        </Animated.View>
      </Animated.View>
    </PanGestureHandler>
  </View>
  );

提前致谢。

标签： react-nativeslidergesturereact-native-reanimated