React native 反应本机：抽屉不'；当点击屏幕背景时，屏幕不会关闭

我有一个React应用程序，在其中我使用

createStackNavigator

实现了

createDrawernavigator

。我一按按钮，抽屉就打开了。这很好，但抽屉打开后，当我点击屏幕背景或从右向左滑动时，抽屉不会关闭

代码：

import*as React from“React”；
从“react Navigation”导入{createStackNavigator、createSwitchNavigator、createAppContainer、createDrawerNavigator、DrawerNavigator、Navigation、DrawerActions}；
从“/screens/LoginScreen/Login”导入登录名；
从“react native default preference”导入DefaultPreference；
从“/components/Icons”导入图标；
从“react native”导入{View，Dimensions，StyleSheet，Platform，TouchableOpacity，Text，AppRegistry}；
从“./screens/DrawerScreen”导入抽屉屏幕
从“/styles/color”导入颜色
从“/screens/MachineListScreen/Machines”导入机器；
从“./screens/MachineInfo/MachineInfo”导入MachineInfo
从“/screens/MachineInfo/Machine”导入计算机
//从“/screens/DeviceListScreen/Devices”导入设备；
//从“/screens/WiFiConfig screen/WiFiConfig”导入WiFiConfig；
从“/screens/AuthLoading”导入AuthLoading
从“./screens/ChangePasswordScreen/ChangePassword”导入ChangePassword
从“./screens/ChangePasswordScreen/ForgotPassword”导入ForgotPassword
从“/screens/Analyze/AnalyzeScreen”导入分析
从“./screens/Reports/Report”导入报告
从“反应本机搜索框”导入搜索
从“/screens/About/About”导入关于
//从“反应本机搜索框”导入搜索；
var width=Dimensions.get（'window'）.width
var customerName=“”
DefaultPreference.get（'customerName'）。然后（（val）=>{
客户名称=val
})
const MachineStack=createStackNavigator({
机器：{
屏幕：机器，
导航选项：（{navigation，screenProps}）=>({
标题：（）=>{
返回
navigation.state.routes[navigation.state.index].params.handleCancel（）}
onCancel={（）=>navigation.state.routes[navigation.state.index].params.handleCancel（）}
onChangeText={（文本）=>navigation.state.routes[navigation.state.index].params.handleChange（文本）}
/>
},
左校长：
{navigation.dispatch（DrawerActions.toggleDrawer（））}>
,
}),
},
机器：{屏幕：机器}，
MachineInfo:{屏幕：MachineInfo}，
分析：{屏幕：分析}，
报告：{屏幕：报告}，
密码屏幕：{screen:ChangePassword}，
AboutScreen:{屏幕：关于}
},
{
导航选项：（{navigation}）=>({
//要显示在状态栏中的标题
头型：{
海拔：0，
背景色：“2196F3”
},
标题颜色：“fff”，
头饰样式：{
fontWeight:'粗体'，
},
})
})
//创建抽屉驱动程序。
const Drawer=createDrawerNavigator({
机台：{
屏幕：MachineStack
}
}, {
initialRouteName:'MachineStack'，
内容组件：抽屉屏幕，
}
);
const MenuImage=（{navigation}）=>{
if（！navigation.state.isDrawerOpen）{
返回
}否则{
返回
}
}
//stacknavigator
const AuthStack=createStackNavigator（{Login:Login，ChangePassword:ChangePassword，ForgotPassword:ForgotPassword}）；
//切换导航器。
const AppNavigator=createSwitchNavigator(
{
AuthLoading:AuthLoading，
应用程序：抽屉，
Auth:AuthStack，
},
{
initialRouteName:“AuthLoading”，
}
);
const styles=StyleSheet.create({
付款人：{
颜色：“#fff”，
填充：10
}
})
导出默认createAppContainer（AppNavigator）；

尝试将左侧组件代码部分更改为：

navigationOptions: ({ navigation }) => {
  return {
    . . .
    headerLeft: (
      <TouchableOpacity onPress={() => { navigation.dispatch(DrawerActions.toggleDrawer()) }}>
        <MenuImage navigation={navigation} />
      </TouchableOpacity>
    ),
  }
},

navigationOptions:（{navigation}）=>{
返回{
. . .
左校长：(
{navigation.dispatch（DrawerActions.toggleDrawer（））}>
),
}
},

另外，我认为您缺少

导航选项开头的
返回{

希望能有帮助

更多信息请点击这里：
这对我很有用

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import { gestureHandlerRootHOC } from 'react-native-gesture-handler'

AppRegistry.registerComponent(appName, () => gestureHandlerRootHOC(App));

我尝试了上面的代码，但对我来说不起作用。当我在navigationoption开始时添加return时，菜单图像和搜索栏不可见。只有背景屏幕