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

一种方法是假装＆＃34;假的＆＃34; TouchableWithoutFeedback whis的容器只是实际内容之下的一层。这是一个例子：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()的事件数据。

我通过样式切换了可见性。这是因为在我处理的许多情况下，切换元素有一些视觉效果。

Answer 2

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

<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 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>
    )
};`

单击外部时隐藏组件

3 个答案: