如何在类组件中为react-native-deck-swiper卡片添加TapGestureHandler

要实现点击卡片内图片并获取点击位置的X坐标，你需要把TapGestureHandler从外层红色容器移到react-native-deck-swiper的renderCard方法里，直接包裹每张卡片的图片组件。这样手势就能捕获到图片上的点击事件，而不是仅外层红色区域有效。

1. 修改卡片渲染函数 #

调整你的Card渲染方法，给图片添加手势处理：

Card = (card) => {
  const onImageTap = (event) => {
    if (event.nativeEvent.state === State.ACTIVE) {
      // 获取点击位置的X坐标（相对于当前组件）
      const tapX = event.nativeEvent.x;
      // 若需要屏幕绝对坐标，改用event.nativeEvent.absoluteX
      alert(`图片点击位置X坐标：${tapX}`);
    }
  };

  return (
    <TapGestureHandler onHandlerStateChange={onImageTap}>
      <AnimatedView style={styles.cardWrapper}>
        <Image
          source={{ uri: card.yourImageField }} // 替换为你的图片地址字段
          style={styles.cardImage}
        />
        {/* 卡片其他内容 */}
      </AnimatedView>
    </TapGestureHandler>
  );
};

const styles = StyleSheet.create({
  cardWrapper: {
    flex: 1,
    borderRadius: 12,
    overflow: 'hidden',
  },
  cardImage: {
    width: '100%',
    height: '100%',
    resizeMode: 'cover',
  },
});

2. 移除外层冗余的手势处理 #

如果不需要再监听红色区域的点击，可以移除外层容器上的TapGestureHandler，保留最外层的GestureHandlerRootView即可：

// 外层组件修改后
return (
  <GestureHandlerRootView style={{ zIndex: 10 }}>
    <AnimatedView style={styles.container}>
      <ImageSwiperDeck
        index={index}
        listOfAssetsWithinTheAlbum={listOfAssetsWithinTheAlbum}
        moveImageToTrashBin={moveImageToTrashBin}
        keepImageInAlbum={keepImageInAlbum}
      />
    </AnimatedView>
  </GestureHandlerRootView>
);

这样修改后，每次点击卡片内的图片时，onImageTap函数会触发，你可以通过event.nativeEvent.x或event.nativeEvent.absoluteX获取对应的点击位置坐标。

内容的提问来源于stack exchange，提问作者Broump