React Native手柄触摸释放

Question

我有一个组件，当用户长按一张卡时，我会显示该卡的更大版本。

其理念是，只要用户继续按下触摸键，就会显示更大的卡，然后只有当手指松开时才会隐藏(类似于instagram长按)。我试图使用<TouchableHighlight>的onLongPress和onPressOut道具来存档，问题是onPressOut道具有他们称之为"取消"的东西，

/***当触摸被释放时调用，*但如果被取消(例如通过窃取响应器锁定的滚动)则不会。*/

现在发生的情况是，当用户握住并移动手指时，会调用onPressOut道具，因此隐藏较大的卡。

这是代码：

<View style={styles.container}>
<View style={styles.separator}>
<TouchableHighlight
underlayColor="rgba(255, 255, 255, 0)"
onPress={this.cardClick}
onLongPress={this.cardLongPress}
onPressOut={this.cardPressOut}
>
{this.content}
</TouchableHighlight>
</View>
</View>

这里有一个GIF来显示正在发生的事情：

GIF

我想要的是只有当用户适当地松开手指时才会触发的东西，无论他是否将手指向上移动。提前感谢您的帮助。

Answer 1

尝试设置偏移https://facebook.github.io/react-native/docs/touchablewithoutfeedback#pressretentionoffset，或在不带反馈的情况下将您的根视图转换为可触摸的视图，然后调用PressOut there

Answer 2

所以你想要一个Instagram风格的预览模式。我抓住你了。

正如前面的评论中所提到的，你应该使用pressRetentionOffset道具，它会让你"；延伸"；可按压区域。https://facebook.github.io/react-native/docs/touchablewithoutfeedback#pressretentionoffset

但是！只有禁用ScrollView时，此道具才会起作用。因此，当预览模式显示时，您需要禁用滚动。

您可以使用ScrollView上的scrollEnabled道具来实现这一点，并在显示预览模式时使其失效。

当然，这适用于onLongPress和onPressOut道具。