React native 仅初始插值的不透明度和比例值传递到有条件渲染的Animated.View。不基于平移手势更改的值

我正在尝试建立类似打火机的刷卡，但如果你不想做的话，你可以放弃锻炼程序。我将按照本教程介绍如何构建tinder刷卡

这是我的密码

 export default function SwipeableImage({
  routine,
  willLike,
  willPass,
  currentIndex,
  index,
}: SwipeableImageProps) {


  ...

  const position = new Animated.ValueXY();

  

  const panResponder = React.useMemo(
    () =>
      PanResponder.create({
        onMoveShouldSetPanResponder: (evt, gestureState) => {
          return (
            Math.abs(gestureState.dx) > Math.abs(gestureState.dy * 3) &&
            Math.abs(gestureState.vx) > Math.abs(gestureState.vy * 3)
          );
        },
        onPanResponderMove: (evt, gestureState) => {
          position.setValue({ x: gestureState.dx, y: gestureState.dy });
        },
        onPanResponderRelease: (evt, gestureState) => {},
      }),
    []
  );

...

  const nextCardOpacity = position.x.interpolate({
    inputRange: [-width / 2, 0, width / 2],
    outputRange: [1, 0, 1],
    extrapolate: "clamp",
  });

  const nextCardScale = position.x.interpolate({
    inputRange: [-width / 2, 0, width / 2],
    outputRange: [1, 0.8, 1],
    extrapolate: "clamp",
  });

  const nextCardAnimation = {
    opacity: nextCardOpacity,
    transform: [{ scale: nextCardScale }],
  };

  function renderRoutine() {
    return (
      <Box
        backgroundColor="secondary"
        flex={1}
        borderRadius="m"
        marginBottom="m"
        marginHorizontal="s"
      >
        <Image
          style={{
            height: "20%",
            width: "100%",
            borderTopLeftRadius: theme.borderRadii.m,
            borderTopRightRadius: theme.borderRadii.m,
          }}
          source={require("./assets/abs.jpg")}
        />

        <Box marginTop="s" flex={1} borderRadius="l">
          <Animated.ScrollView scrollEventThrottle={50}>
            {routine.map((exercise, index) => {
              return (
                <Box
                  key={index}
                  flexDirection="row"
                  justifyContent="space-between"
                  height={60}
                  borderWidth={1}
                  backgroundColor="primary"
                  alignItems="center"
                  paddingHorizontal="m"
                  marginLeft="s"
                  marginRight="s"
                  borderRadius="m"
                >
                  <Text style={{ color: "white" }}>{index} .</Text>

                  <Text style={{ color: "white" }}>{exercise.name}</Text>
                </Box>
              );
            })}
            <Box alignItems="center" marginVertical="m">
              <Button
                variant="primary"
                label="Start routine"
                onPress={() => true}
              />
            </Box>
          </Animated.ScrollView>
        </Box>
      </Box>
    );
  }

  if (index < currentIndex) {
    return null;
  } else if (index === currentIndex) { //render current routine
    return (
      <Animated.View
        {...panResponder.panHandlers}
        key={index}
        style={[
          rotateAndTranslate,
          { height: "100%", width: "100%", position: "absolute" },
        ]}
      >
        {renderRoutine()}
      </Animated.View>
    );
  } else { // render next routine
    return (
      <Animated.View
        key={index}
        style={[
          nextCardAnimation,     // This value is not changing it only stays at the original value
          { height: "100%", width: "100%", position: "absolute" },
        ]}
      >
        {renderRoutine()}
      </Animated.View>
    );
  }
}

我可以看到nextCardOpacity按预期从0变为1或从0变为1，这是控制台输出

...
nextCardOpacity =
0.11272139249792423
nextCardOpacity =
0.11433174759869413
nextCardOpacity =
0.1159420289855072
nextCardOpacity =
0.11916266547309029
...

我稍后会放一段视频。我想不出来。谢谢大家!

...
nextCardOpacity =
0.11272139249792423
nextCardOpacity =
0.11433174759869413
nextCardOpacity =
0.1159420289855072
nextCardOpacity =
0.11916266547309029
...