react-native - 单击外部时隐藏组件

Question

在组件外部单击时，我想隐藏它。就像关闭键盘一样。我通过更改 onPress 状态将我的整个 View 包装在 ToucheableWithoutFeedback 中来完成此操作，但 Toucheables 禁用了 ScrollView。

你能告诉我 ScrollView 仍然有效的方法吗？

或者

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

我目前的代码是这样的:

<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>