javascript - react native : Swipeable and Touchable

Question

我想在 View 的一个容器中注册三个手势:

1. 当用户触摸卡片时 -> 加载有关卡片的详细信息
2. 当用户向下滑动卡片时 -> “喜欢”它并显示下一张卡片
3. 当用户向上滑动卡片时 ->“跳过”它并显示下一张卡片

我当前的实现使用 PanHandler 来注册手势，并使用 TouchableOpacity 来减少刷卡时的不透明度。

但我不确定如何为同一张卡片实现上述三个手势。

Answer 1

您可以只使用 <TouchableHighlight /> (或任何其他“可触摸”组件)嵌套在 <Swipeable /> 内部组件(通常使用 react-native-swipeable 库实现)。

所以像下面这样:

{/* Props are not set in this example for simplicity */}
<Swipeable>
    {/* You should of course nest some components in the next element if you want to */}
    <TouchableHighlight />
</Swipeable>

我自己是这样修复的。

顺便说一句:以相反的方式嵌套元素(像 <TouchableHighlight><Swipeable /></TouchableHighlight> )给我带来了很多问题，所以我不建议这样做。