单击外部时隐藏组件答案

【问题标题】：Hide component when clicking outside单击外部时隐藏组件
【发布时间】：2016-11-24 18:04:40
【问题描述】：

我想在组件外部单击时隐藏它。就像解雇键盘一样。我通过更改状态 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>

【问题讨论】：

我知道你问这个问题已经很久了。将此链接放在这里，以供未来的开发人员问与您相同的问题。 How to detect click outside。由于缺乏替代方案，该方法使用内部 React 私有道具

标签： react-native

【解决方案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>

【讨论】：

【解决方案2】：

一种方法是为TouchableWithoutFeedback 设置“假”容器，这只是实际内容下方的一层。这是一个例子：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>
  );
}

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

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

【讨论】：

感谢您的回复。这不起作用，因为我不能再点击它后面的 Toucheables。
@Damathryx 你有想过这个吗？

【解决方案3】：

已经是一个老问题了，但这是第一个结果，所以这里是：

我们将使用占据整个屏幕的不可见元素填充相关容器的背景，如下所示：

<TouchableWithoutFeedback onPress={onBlur}>
    <View style={{width, height, position: 'absolute', left: 0, top: 0}} />
</TouchableWithoutFeedback>

这是我接受孩子的完整模态（样式使他们居中）：

import {Dimensions, View, TouchableWithoutFeedback} from 'react-native';

const ModalFloating = ({children, onBlur = ()=>{} }) => {
    const [{width, height}, setSize] = useState({width: 0, height: 0});

    return (
        <View style={[styles.wrapper, {width, height}]} onLayout={() => setSize(Dimensions.get('window'))}>
            <TouchableWithoutFeedback onPress={onBlur}>
                <View style={{width, height, position: 'absolute', left: 0, top: 0}} />
            </TouchableWithoutFeedback>
        {children}
    </View>
    )
};`

【讨论】：