1

我正在创建一个可滑动视图组件的列表。我想实现,当一个可滑动的活动处于活动状态时,触摸除此可滑动视图之外的任何其他位置都会关闭滑动。有点像 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>
  );
}

4

1 回答 1

1

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


render() {
 return (
      <>
       <TouchableOpacity style={{flex: 1, height: "100%", width:"100%"}} onPress={()=>yourOutsdieClickAction()} />
       <Swipeable
          friction={2}
          overshootRight={false}
          renderRightActions={this.renderRight}
        >
        <View> 
        .....
        </View>
       </Swipeable>
      </>
      );
  }
于 2020-04-25T17:20:33.213 回答