javascript - 快速刷新后React Native Reanimated不改变值

Question

我正在使用react-native-reanimated和react-native-gesture-handler库开发动画。当我打开页面时，它按预期工作。但是当我使用快速挂钩或hook在函数中更改任何数据时。的值posX正在被重置。即使它出现在debug 'in the event, it does not update the data inAnimated.View` 中。

import React, { useState } from 'react';
import { StyleSheet, View, Image, Dimensions } from 'react-native';
import Animated, {
  Value,
  event,
  set,
  block,
  cond,
  add,
  eq,
  debug,
  greaterThan,
  lessThan,
  multiply,
  useCode,
} from 'react-native-reanimated';

import { PanGestureHandler, State } from 'react-native-gesture-handler';

interface Props {}

const R = 70;

const image1 = require('./img1.jpeg');
const image2 = require('./img3.jpeg');

const { width, height } = Dimensions.get('window');

export const SplitView: React.FC<Props> = () => {

  const MAX = width - R;
  const MIN = 0;

  const posX = new Value<number>(0);
  const offsetX = new Value<number>((width - R) / 2);
  const panState = new Value(State.UNDETERMINED);

  const onGestureHandler = event([
    {
      nativeEvent: ({
        translationX,
        state,
      }: {
        translationX: number;
        state: State;
      }) =>
        block([
          set(panState, state),
          set(posX, add(translationX, offsetX)),

          cond(
            lessThan(posX, MIN),
            set(posX, MIN),
            cond(greaterThan(posX, MAX), set(posX, MAX)),
          ),

          debug('posX ', posX), // <=== always show on console

          cond(eq(state, State.END), [
            set(offsetX, add(offsetX, translationX)),

            cond(
              lessThan(offsetX, MIN),
              set(offsetX, MIN),
              cond(greaterThan(offsetX, MAX), set(offsetX, MAX)),
            ),
          ]),
        ]),
    },
  ]);


  return (
    <View style={styles.container}>
      <View style={[styles.left, { width, height }]}>
        <Animated.Image style={styles.image} source={image1} />
      </View>

      // But after value change or run fast refresh not working.
      // Initial value gets stuck
      <Animated.View
        style={[styles.right, { width, height, left: add(posX, R / 2) }]}>
        <Animated.Image
          style={[styles.image, { left: multiply(add(posX, R / 2), -1) }]}
          source={image2}
        />
      </Animated.View>

      <PanGestureHandler
        onGestureEvent={onGestureHandler}
        onHandlerStateChange={onGestureHandler}>
        <Animated.View
          style={[
            styles.ball,
            {
              left: posX,
              top: (height - R) / 2,
            },
          ]}
        />
      </PanGestureHandler>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'blue',
  },
  ball: {
    width: R,
    height: R,
    backgroundColor: 'red',
    borderRadius: R / 2,
    zIndex: 2,
  },

  image: {
    flex: 1,
  },

  left: {
    position: 'absolute',
    top: 0,
    left: 0,
    flex: 1,
  },

  right: {
    position: 'absolute',
    flex: 1,
    top: 0,
    left: 0,
    zIndex: 1,
    overflow: 'hidden',
    backgroundColor: 'yellow',
  },
});