Javascript TypeError:undefined不是使用navigation.openDrawer（）时获取的对象

尝试使用

navigation.openDrawer（）

打开我的sidedrawer组件时，我遇到了此错误。 我尝试将抽屉组件嵌套在

导航容器中，但没有成功
预期的行为是侧抽屉在单击图标时滑入

HomeStack.js

import 'react-native-gesture-handler';
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import Login from '../login/login';
import Register from '../register/register';
import Welcome from '../welcome/welcome';
import ResetPWD from '../register/resetpwd';
import RegisterLogin from '../register/registerlogin';
import About from '../screens/about';
import More from '../screens/more';
import Gallery from '../screens/gallery';
import Excos from '../screens/excos';
import AbuladWebsite from '../screens/abuladwebsite';
import LifeInAbu from '../screens/lifeinabu';
import {Icon} from 'react-native-elements';
// import SideStack from '../routes/sideStack';
import {createDrawerNavigator} from '@react-navigation/drawer';

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

function sideDrawer({navigation}) {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Gallery" component={Gallery} />
      <Drawer.Screen name="Life in ABU" component={LifeInAbu} />
      <Drawer.Screen name="Buy and Sell" component={AbuladWebsite} />
      <Drawer.Screen name="About" component={About} />
      <Drawer.Screen name="Excos" component={Excos} />
      <Drawer.Screen name="More" component={More} />
    </Drawer.Navigator>
  );
}

function homeStack({navigation}) {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Login"
          component={Login}
          options={{headerShown: false}}
        />
        <Stack.Screen
          name="Register"
          component={Register}
          options={{headerShown: false}}
        />
        <Stack.Screen
          name="ResetPWD"
          component={ResetPWD}
          options={{headerShown: false}}
        />
        <Stack.Screen
          name="RegisterLogin"
          component={RegisterLogin}
          options={{headerShown: false}}
        />
        <Stack.Screen name="sideStack" component={sideDrawer} />
        <Stack.Screen
          name="Welcome"
          component={Welcome}
          options={{
            title: 'Abulad',
            headerLeft: () => (
              <Icon
                name="android"
                onPress={() => navigation.openDrawer()}
                // title="Info"
                color="#000"
              />
            ),
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default homeStack;

导入“反应本机手势处理程序”；
从“React”导入React；
从'@react-navigation/native'导入{NavigationContainer}；
从'@react navigation/stack'导入{createStackNavigator}；
从“../Login/Login”导入登录名；
从“../Register/Register”导入寄存器；
从“../Welcome/Welcome”导入Welcome；
从“../register/ResetPWD”导入ResetPWD；
从“../register/RegisterLogin”导入RegisterLogin；
从“../screens/About”导入关于；
从“../screens/More”导入更多内容；
从“../screens/Gallery”导入库；
从“../screens/Excos”导入Excos；
从“../screens/AbuladWebsite”导入AbuladWebsite；
从“../screens/LifeInAbu”导入LifeInAbu；
从“react native elements”导入{Icon}；
//从“../routes/SideStack”导入侧堆栈；
从'@react导航/drawer'导入{createDrawerNavigator}；
const Stack=createStackNavigator（）；
const Drawer=createDrawerNavigator（）；
函数侧抽屉（{navigation}）{
返回(
);
}
函数homeStack（{navigation}）{
返回(
(
navigation.openDrawer（）}
//title=“Info”
color=“#000”
/>
),
}}
/>
);
}
出口违约本币；

App.js


import React, {Component} from 'react';
import SplashScreen from 'react-native-splash-screen';
import HomeStack from './src/components/routes/homeStack';
import SideStack from './src/components/routes/sideStack';

class App extends Component {
  componentDidMount() {
    SplashScreen.hide();
  }
  render() {
    return <HomeStack />;
  }
}

export default App;




从“React”导入React，{Component}；
从“react native SplashScreen”导入SplashScreen；
从“/src/components/routes/HomeStack”导入HomeStack；
从“/src/components/routes/SideStack”导入侧堆栈；
类应用程序扩展组件{
componentDidMount（）{
SplashScreen.hide（）；
}
render（）{
返回；
}
}
导出默认应用程序；

要使用openDrawer（），您需要将堆栈导航器包装在抽屉导航器中
你可以这样做：

    import 'react-native-gesture-handler';
    import React from 'react';
    import {NavigationContainer} from '@react-navigation/native';
    import {createStackNavigator} from '@react-navigation/stack';
    import Login from '../login/login';
    import Register from '../register/register';
    import Welcome from '../welcome/welcome';
    import ResetPWD from '../register/resetpwd';
    import RegisterLogin from '../register/registerlogin';
    import About from '../screens/about';
    import More from '../screens/more';
    import Gallery from '../screens/gallery';
    import Excos from '../screens/excos';
    import AbuladWebsite from '../screens/abuladwebsite';
    import LifeInAbu from '../screens/lifeinabu';
    import {Icon} from 'react-native-elements';
    // import SideStack from '../routes/sideStack';
    import {createDrawerNavigator} from '@react-navigation/drawer';

    const Stack = createStackNavigator();
    const Drawer = createDrawerNavigator();

    function sideDrawer({navigation}) {
      return (
        <NavigationContainer>
        <Drawer.Navigator>
            <Drawer.Screen name="Home" component={homeStack} />
          <Drawer.Screen name="Gallery" component={Gallery} />
          <Drawer.Screen name="Life in ABU" component={LifeInAbu} />
          <Drawer.Screen name="Buy and Sell" component={AbuladWebsite} />
          <Drawer.Screen name="About" component={About} />
          <Drawer.Screen name="Excos" component={Excos} />
          <Drawer.Screen name="More" component={More} />
        </Drawer.Navigator>
        </NavigationContainer>
      );
    }

    function homeStack({navigation}) {
      return (
          <Stack.Navigator>
             <Stack.Navigator>
    <Stack.Screen
      name="Welcome"
      component={Welcome}
      options={{
        title: 'Abulad',
        headerLeft: () => (
          <Icon
            name="android"
            onPress={() => navigation.openDrawer()}
            // title="Info"
            color="#000"
          />
           ),
          }}
          />
            <Stack.Screen
              name="Login"
              component={Login}
              options={{headerShown: false}}
            />
            <Stack.Screen
              name="Register"
              component={Register}
              options={{headerShown: false}}
            />
            <Stack.Screen
              name="ResetPWD"
              component={ResetPWD}
              options={{headerShown: false}}
            />
            <Stack.Screen
              name="RegisterLogin"
              component={RegisterLogin}
              options={{headerShown: false}}
            />
            <Stack.Screen name="sideStack" component={sideDrawer} />

          </Stack.Navigator>
      );
    }

    export default sideDrawer;

导入“反应本机手势处理程序”；
从“React”导入React；
从'@react-navigation/native'导入{NavigationContainer}；
从'@react navigation/stack'导入{createStackNavigator}；
从“../Login/Login”导入登录名；
从“../Register/Register”导入寄存器；
从“../Welcome/Welcome”导入Welcome；
从“../register/ResetPWD”导入ResetPWD；
从“../register/RegisterLogin”导入RegisterLogin；
从“../screens/About”导入关于；
从“../screens/More”导入更多内容；
从“../screens/Gallery”导入库；
从“../screens/Excos”导入Excos；
从“../screens/AbuladWebsite”导入AbuladWebsite；
从“../screens/LifeInAbu”导入LifeInAbu；
从“react native elements”导入{Icon}；
//从“../routes/SideStack”导入侧堆栈；
从'@react导航/drawer'导入{createDrawerNavigator}；
const Stack=createStackNavigator（）；
const Drawer=createDrawerNavigator（）；
函数侧抽屉（{navigation}）{
返回(
);
}
函数homeStack（{navigation}）{
返回(
(
navigation.openDrawer（）}
//title=“Info”
color=“#000”
/>
),
}}
/>
);
}
导出默认侧抽屉；



希望这有帮助
 要使用openDrawer（），您需要将堆栈导航器包装在抽屉导航器中
你可以这样做：

    import 'react-native-gesture-handler';
    import React from 'react';
    import {NavigationContainer} from '@react-navigation/native';
    import {createStackNavigator} from '@react-navigation/stack';
    import Login from '../login/login';
    import Register from '../register/register';
    import Welcome from '../welcome/welcome';
    import ResetPWD from '../register/resetpwd';
    import RegisterLogin from '../register/registerlogin';
    import About from '../screens/about';
    import More from '../screens/more';
    import Gallery from '../screens/gallery';
    import Excos from '../screens/excos';
    import AbuladWebsite from '../screens/abuladwebsite';
    import LifeInAbu from '../screens/lifeinabu';
    import {Icon} from 'react-native-elements';
    // import SideStack from '../routes/sideStack';
    import {createDrawerNavigator} from '@react-navigation/drawer';

    const Stack = createStackNavigator();
    const Drawer = createDrawerNavigator();

    function sideDrawer({navigation}) {
      return (
        <NavigationContainer>
        <Drawer.Navigator>
            <Drawer.Screen name="Home" component={homeStack} />
          <Drawer.Screen name="Gallery" component={Gallery} />
          <Drawer.Screen name="Life in ABU" component={LifeInAbu} />
          <Drawer.Screen name="Buy and Sell" component={AbuladWebsite} />
          <Drawer.Screen name="About" component={About} />
          <Drawer.Screen name="Excos" component={Excos} />
          <Drawer.Screen name="More" component={More} />
        </Drawer.Navigator>
        </NavigationContainer>
      );
    }

    function homeStack({navigation}) {
      return (
          <Stack.Navigator>
             <Stack.Navigator>
    <Stack.Screen
      name="Welcome"
      component={Welcome}
      options={{
        title: 'Abulad',
        headerLeft: () => (
          <Icon
            name="android"
            onPress={() => navigation.openDrawer()}
            // title="Info"
            color="#000"
          />
           ),
          }}
          />
            <Stack.Screen
              name="Login"
              component={Login}
              options={{headerShown: false}}
            />
            <Stack.Screen
              name="Register"
              component={Register}
              options={{headerShown: false}}
            />
            <Stack.Screen
              name="ResetPWD"
              component={ResetPWD}
              options={{headerShown: false}}
            />
            <Stack.Screen
              name="RegisterLogin"
              component={RegisterLogin}
              options={{headerShown: false}}
            />
            <Stack.Screen name="sideStack" component={sideDrawer} />

          </Stack.Navigator>
      );
    }

    export default sideDrawer;

导入“反应本机手势处理程序”；
从“React”导入React；
从'@react-navigation/native'导入{NavigationContainer}；
从'@react navigation/stack'导入{createStackNavigator}；
从“../Login/Login”导入登录名；
从“../Register/Register”导入寄存器；
从“../Welcome/Welcome”导入Welcome；
从“../register/ResetPWD”导入ResetPWD；
从“../register/RegisterLogin”导入RegisterLogin；
从“../screens/About”导入关于；
从“../screens/More”导入更多内容；
从“../screens/Gallery”导入库；
从“../screens/Excos”导入Excos；
从“../screens/AbuladWebsite”导入AbuladWebsite；
从“../screens/LifeInAbu”导入LifeInAbu；
从“react native elements”导入{Icon}；
//从“../routes/SideStack”导入侧堆栈；
从'@react导航/drawer'导入{createDrawerNavigator}；
const Stack=createStackNavigator（）；
const Drawer=createDrawerNavigator（）；
函数侧抽屉（{navigation}）{
返回(
);
}
函数homeStack（{navigation}）{
返回(
(
navigation.openDrawer（）}
//title=“Info”
color=“#000”
/>
),
}}
/>
);
}
导出默认侧抽屉；



希望这有帮助
 我建议你检查这个答案：我建议你检查这个答案：