Javascript 反应本机侦听组件外部的触摸事件

我正在创建可切换视图组件的列表。我想实现的是，当一个刷卡处于活动状态时，触摸除此刷卡视图之外的任何其他位置都将关闭刷卡。有点像模糊上的文本输入

我认为在这里添加一个侦听器可能会有所帮助，但并不完全确定如何实现它

稍后我还有一个堆栈导航器，可以将页面推到列表顶部。我正在寻找的是相同的，一旦超出视图，然后关闭滑动

明确地说，代码是这样的

{items.map（item=>）}

在组件旁边，添加占据显示屏其余部分的

TouchableOpacity

---

render（）{
返回(
YourOutsieClickAction（）}/>
.....
);
}

我想我错过了什么。如果我将touchableOpacity放置在可滑动项之外，这是否会阻止列表中其他可滑动项的触摸？您可以使用此选项，但无论其是否合适，例如，仅当

处于活动状态时渲染它&

或切换到

。如果这种方法仍然存在问题，可以使用

ref

和

onStartShouldSetResponder设置它，如中所示
render() {
 return (
      <>
       <TouchableOpacity style={{flex: 1, height: "100%", width:"100%"}} onPress={()=>yourOutsdieClickAction()} />
       <Swipeable
          friction={2}
          overshootRight={false}
          renderRightActions={this.renderRight}
        >
        <View> 
        .....
        </View>
       </Swipeable>
      </>
      );
  }