反应本机动画滑动

Question

如何在React native上制作此动画？

我希望当用户做出向右滑动头盔的手势时，它将移动到另一个屏幕，而当向左滑动头盔时，它将移动到另一个屏幕

就这么简单吗？

您还有其他建议吗？

下面的代码：

const pan = useRef(new Animated.ValueXY()).current;
  const panResponder = useRef(
    PanResponder.create({
      onMoveShouldSetPanResponder: () => true,
      onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}]),
      onPanResponderRelease: () => {
        Animated.spring(pan, {toValue: {x: 0, y: 0}}).start();
      },
    }),
  ).current;

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Nova corrida</Text>
      <Text style={styles.description}>Percurso total de 2,7km</Text>
      <Text style={styles.description}>Tempo estimado 10 minutos</Text>
      <View style={styles.descriptionContainer}>
        <Text style={styles.progressDescription}>
          1,5km até coletar o pedido
        </Text>
        <Text style={styles.progressDescription}>McDonalds, 1002</Text>
        <Text style={styles.progressDescription}>Rua das Oliveiras, 43</Text>
      </View>
      <View style={styles.progressBarContainer}>
        <View
          style={{
            height: '100%',
            flex: currentProgress,
            backgroundColor: '#8CC63F',
          }}
        />
        <View
          style={{
            height: '100%',
            flex: 100 - currentProgress,
            backgroundColor: 'grey',
          }}
        />
      </View>
      <Animated.View
        style={{
          transform: [{translateX: pan.x}, {translateY: pan.y}],
        }}
        {...panResponder.panHandlers}>
        <View style={styles.box}>
          <View style={styles.iconContainer}>
            <MaterialCommunityIcons
              style={styles.iconContainer}
              name="racing-helmet"
              size={36}
              color="#fff"
            />
          </View>
        </View>
      </Animated.View>
      <View style={styles.iconsNavigation}>
        <MaterialIcons
          style={styles.iconSpace}
          name="cancel"
          size={30}
          color="#707070"
        />
        <MaterialIcons
          style={styles.iconSpace}
          name="check-circle"
          size={30}
          color="#8CC63F"
        />
      </View>
    </View>
  );