需要帮助在React Native中制作按钮按下触发滑动动画

Question

我目前正在开发一个 React-Native 应用程序，其中我使用

SwipeableCard

实现了

PanResponder

组件来处理滑动手势。当用户实际刷卡时，卡会做出适当的响应。我使用了在这里找到的代码：https://aboutreact.com/react-native-swipeable-cardview-like-tinder/

问题详情：

我在扩展此功能以在按下按钮时触发相同的滑动动画方面面临挑战。在我的父组件 (

FeatureCard

) 中，我渲染

SwipeableCard

并处理按钮按下操作。我希望按下按钮来启动相同的滑动动画，就像用户向左或向右滑动卡片一样。

来自

SwipeableCard

组件的相关代码

const panResponder = PanResponder.create({
  // ... (PanResponder configuration)
  
  onPanResponderRelease: (evt, gestureState) => {
    // Swipe animation logic based on gestureState
    // ...
  },
});

return (
  <Animated.View
    {...panResponder.panHandlers}
    style={[
      styles.card,
      {
        backgroundColor: item.backgroundColor,
        opacity: cardOpacity,
        transform: [{ translateX: xPosition }, { rotate: rotateCard }],
      },
    ]}
  >
    {/* ... (card content) */}
  </Animated.View>
);

来自

FeatureCard

组件的相关代码

// ...

  const [noMoreCard, setNoMoreCard] = useState(false);
  const [sampleCardArray, setSampleCardArray] = useState(DEMO_CONTENT);
  const [swipeDirection, setSwipeDirection] = useState('--');

  const removeCard = id => {
    ...
  };

  const lastSwipedDirection = swipeDirection => {
    ...
  };

  return (
    <View>
      <View style={styles.cardContainer}>
        {sampleCardArray.map((item, key) => (
          <SwipeableCard
            key={key}
            item={item}
            removeCard={() => removeCard(item.id)}
            swipedDirection={lastSwipedDirection}
          />
        ))}
        {noMoreCard ? (
          <Text style={{fontSize: 22, color: '#000'}}>No Cards Found.</Text>
        ) : null}
      </View>
      <View style={styles.buttonsContainer}>
        <ImageButton
          style={styles.button}
          source={require('/FalseButton.png')}
          onPress={() => {handleButton('Left')}}
        />
        <ImageButton
          style={styles.button}
          source={require('/TrueButton.png')}
          onPress={() => handleButton('Right')}
        />
      </View>
);

直接状态更新：我尝试直接更新

swipeDirection

函数中的状态 (

handleButton

)，并期望现有的动画逻辑来处理更新。不幸的是，这没有按预期触发动画。我仍然认为应该这样做，但我非常不确定细节。 这就像当我按下

Button

时，卡片被删除，但动画丢失，如果我使用同一个按钮两次，我需要刷新才能看到更改。我理解它是因为我只调用

removeCard()

函数，但我实际上希望它调用子组件中的

panResponder

（我认为？），但我不知道该怎么做，或者如果我我走在正确的轨道上。

const handleButton = (direction) => {
  removeCard();
  setSwipeDirection(direction);
  // setSwipeDirection('--');
};

模拟尝试：我尝试通过直接调用负责处理滑动手势的函数来模拟滑动动画。但是，我不知道到底该怎么做，我尝试了不同的方法，但有点混乱，所以我决定问一下。

我正在寻求指导或替代方法，以确保按下按钮会触发与用户启动的滑动相同的滑动动画。 任何见解或建议将不胜感激。

Answer 1

您好，问题解决了吗？？