React native 单击外部时隐藏组件

我想在组件外部单击时隐藏该组件。有点像不使用键盘。我通过将我的整个视图包装在Toucheable中来实现这一点，而不通过更改按下时的状态进行反馈，但Toucheables会禁用ScrollView

你能给我一个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>

{this.setState（{toggle:false}}}>
{//content}
{//此处列出}
{{
if（this.state.toggle）{
返回
(
{//单击外部时隐藏的视图}
)
}
其他的
返回

一种方法是为

触摸设置“假”容器，无需反馈，而它只是实际内容下方的一层。下面是一个示例：

render（）{
返回(
this.toggleState（evt）}>
情态动词
);
}

如果要根据单击的元素执行特定操作，可以从提供给
toggleState（）
的
evt
中填充事件数据

我通过样式切换可见性。这是因为在许多情况下，我处理过切换元素的视觉效果。
简单的方法是使用模式透明

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

{}
>
{
这是我的国家({
isAndroidShareOpen:错误，
});
}}
风格={{
背景色：“透明”，
弹性：1，
}}
>
内容
这已经是一个老问题了，但这是第一个结果，所以这里是：

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

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



这是我的完整模式，它接受孩子们（以他们为中心）：

import{Dimensions，View，TouchableWithoutFeedback}来自'react native'；
const ModalFloating=（{children，onBlur=（）=>{}}）=>{
const[{width，height}，setSize]=useState（{width:0，height:0}）；
返回(
设置大小（Dimensions.get（'window'））}>
{儿童}
)
};`
感谢您的回复。这不起作用，因为我再也不能点击它后面的触摸屏了。@Damathryx你知道这个吗？我知道你问这个问题已经很久没有了。将此链接放在此处，供未来开发人员询问与您相同的问题。由于缺乏替代方案，该方法使用内部的私有道具
<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>
    )
};`