javascript - react 本地听组件外部的触摸事件

我正在创建可滑动查看的组件列表。我想实现一种功能，当一个可滑动活动处于活动状态时，触摸此可滑动视图之外的其他任何位置将关闭该滑动。有点像textInput onblur。

我认为添加一个侦听器可能会有所帮助，但不确定如何实现。

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

代码是这样的，很清楚。

<SafeAreaView>
  <ScrollView>
  {items.map(item => <CustomItem itemdata={item} />)}
  </ScrollView>
</SafeAreaView>

使用自定义项目组件，例如：

import Swipeable from 'react-native-gesture-handler/Swipeable';

....//React component stuff

render() {
  return (
  <Swipeable
    friction={2}
    overshootRight={false}
    renderRightActions={this.renderRight}
  >
    <View>
    .....
    </View>
  </Swipeable>
  );
}

最佳答案

在组件旁边，添加显示其余屏幕的TouchableOpacity

render() {
 return (
      <>
       <TouchableOpacity style={{flex: 1, height: "100%", width:"100%"}} onPress={()=>yourOutsdieClickAction()} />
       <Swipeable
          friction={2}
          overshootRight={false}
          renderRightActions={this.renderRight}
        >
        <View>
        .....
        </View>
       </Swipeable>
      </>
      );
  }

关于javascript - react 本地听组件外部的触摸事件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/61429457/