Reactjs 当我们在react native中触摸屏幕上的任何位置时，如何隐藏侧边栏

我创建了一个自定义侧边栏，因为它是客户端请求所需的，我可以在按下按钮时切换侧边栏，但“我需要在按下屏幕上任何位置时关闭侧边栏”

我试图使用react导航中的抽屉，但未能实现我想要的

let width = Dimensions.get('window').width
let height = Dimensions.get('window').height

class Sample1 extends React.Component { 
    constructor(){
        super()
        this.state = {
            toggleDrawer: false
        }
    }

    toggle = () => {
        this.setState(() => ({
            toggleDrawer: !this.state.toggleDrawer
        }))
    }

    touchAnywhere = () => {
        this.setState(() => ({
            toggleDrawer: false
        }))
    }

    render () {
        return (
            <View onPress={this.touchAnywhere}>
                <TouchableOpacity onPress={this.toggle}>
                    <Image
                        source={require('../../images/drawer-150x150.png')}
                    style={{ width: 25, height: 25, marginLeft: "80%" }}
                />
            </TouchableOpacity>

            { 
                this.state.toggleDrawer && (
                    <View style={styles.menu}>
                        <SideBar 
                        />
                    </View>
                )
            }
        </View>
    )
  }
}

const styles = StyleSheet.create({
    menu: {
      flex: 1,
      backgroundColor: 'yellow',
      position : 'absolute',
      left: 0,
      top: 0,
      width : width * 0.8, 
      height : height,
      paddingTop : 10,
      paddingLeft : 10,
      paddingRight : 10,
      paddingBottom : 10
  },
})

let width=Dimensions.get（'window'）.width
让高度=尺寸。获取（'窗口'）。高度
类Sample1扩展了React.Component{
构造函数（）{
超级（）
此.state={
切换抽屉：错误
}
}
切换=（）=>{
此.setState（（）=>({
toggleDrawer:！this.state.toggleDrawer
}))
}
touchAnywhere=（）=>{
此.setState（（）=>({
切换抽屉：错误
}))
}
渲染（）{
返回(
{ 
this.state.toggleDrawer&&(
)
}
)
}
}
const styles=StyleSheet.create({
菜单：{
弹性：1，
背景颜色：“黄色”，
位置：'绝对'，
左:0,，
排名：0，
宽度：宽度*0.8，
高度:高度,，
paddingTop:10，
paddingLeft:10，
paddingRight:10，
垫底：10
},
})

onPress在

视图上不起作用

，您可以将

视图

包装在

无反馈触摸屏中

或直接使用

无反馈触摸屏

：

因此，不要使用

而是使用

您可以在下面查看完整的代码

完整代码：

import React from 'react';
import {
  View,
  TouchableOpacity,
  TouchableWithoutFeedback,
  Dimensions,
  Text,
  StyleSheet,
} from 'react-native';

let width = Dimensions.get('window').width;
let height = Dimensions.get('window').height;

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      toggleDrawer: false,
    };
  }

  toggle = () => {
    this.setState({toggleDrawer: !this.state.toggleDrawer});
  };

  render() {
    return (
      <TouchableWithoutFeedback onPress={this.toggle}>
        <View style={styles.container}>
          <TouchableOpacity onPress={this.toggle}>
            <Text>Toggle Me</Text>
          </TouchableOpacity>

          {this.state.toggleDrawer && (
            <View style={styles.menu}>
              <Text>Sidebar</Text>
            </View>
          )}
        </View>
      </TouchableWithoutFeedback>
    );
  }
}

const styles = StyleSheet.create({
  menu: {
    flex: 1,
    backgroundColor: 'yellow',
    position: 'absolute',
    left: 0,
    top: 0,
    width: width * 0.8,
    height: height,
    paddingTop: 10,
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom: 10,
  },
  container: {
    flex: 1,
  },
});

export default App;

从“React”导入React；
进口{
看法
可触摸不透明度，
可触摸且无反馈，
尺寸，
文本，
样式表，
}从“反应本机”；
让宽度=尺寸。获取（'window'）。宽度；
让高度=尺寸。获取（'窗口'）。高度；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
切换抽屉：错误，
};
}
切换=（）=>{
this.setState（{toggleDrawer:！this.state.toggleDrawer}）；
};
render（）{
返回(
切换我
{this.state.toggleDrawer&&(
边栏
)}
);
}
}
const styles=StyleSheet.create({
菜单：{
弹性：1，
背景颜色：“黄色”，
位置：'绝对'，
左:0,，
排名：0，
宽度：宽度*0.8，
高度:高度,，
paddingTop:10，
paddingLeft:10，
paddingRight:10，
填充底部：10，
},
容器：{
弹性：1，
},
});
导出默认应用程序；

上面的代码我提供了一个侧边栏，当我触摸屏幕上的任何地方时，如果我使用的不是视图，比如触摸屏，则按下按钮时需要关闭侧边栏。我得到了“不变冲突：React.Children.只希望收到一个React元素子元素。”errorHi Farhan，感谢您的回复，我之前尝试过，我得到了这个错误不变冲突：React.Children.只希望收到一个React元素子元素。感谢Farhan的时间和帮助，这帮助很大。我已经投票并勾选了你的答案。