单击外部时隐藏组件

Question

我想在外面点击一个组件时隐藏它.像解雇键盘之类的东西.我通过改变状态onPress将我的整个视图包装在ToucheableWithoutFeedback中来完成此操作,但是Toucheables禁用了ScrollView.

你能告诉我一个滚动视图仍然有效的方法吗？

要么

如何处理视图中或组件外部的点击？

我目前的代码是这样的:

<TouchableWithoutFeedback onPress={() =>{this.setState({toggle:false})}}>
  <View>
    {//content}
  </View>

  <ScrollView>
    {//lists here}
  </ScrollView>
  {{
  if(this.state.toggle){
   return 
     (<View>
      {//The view that im hiding when clicking outside it}
     </View>)
  }
  else
   return <View/>
</TouchableWithoutFeedback>

Answer 1

简单的方法是使用模态透明

<Modal
          transparent
          visible={this.state.isAndroidShareOpen}
          animationType="fade"
          onRequestClose={() => {}}
        >
          <TouchableOpacity
            activeOpacity={1}
            onPress={() => {
              this.setState({
                isAndroidShareOpen: false,
              });
            }}
            style={{
              backgroundColor: 'transparent',
              flex: 1,
            }}
          >
            <TouchableOpacity
              activeOpacity={1}
              style={{
                backgroundColor: '#f2f2f2',
                left: 0,
                top: 50,
                aspectRatio: 1.5,
                width,
                position: 'absolute',
              }}
            >
                <Text>content</Text>
            </TouchableOpacity>
          </TouchableOpacity>
        </Modal>

Answer 2

一种方法是为TouchableWithoutFeedbackwhis设置“假”容器，它只是实际内容下方的一层。这是一个例子：https : //rnplay.org/apps/k2RSNw

render() {
  return (
    <View style={styles.container}>
      <TouchableWithoutFeedback onPress={(evt) => this.toggleState(evt)}>
        <View style={styles.touchable}></View>
      </TouchableWithoutFeedback>
      <View style={[styles.modal, this.isModalVisible()]}>
        <Text>Modal</Text>
      </View>
    </View>
  );
}

如果您想根据单击的元素执行特定操作，您可以填充evt提供给toggleState().

我已经通过样式切换了可见性。这是因为在我处理过的许多情况下，切换元素会产生某种视觉效果。