javascript - 类型错误 : undefined is not an object gotten when using navigation. openDrawer()

Question

在尝试使用 navigation.openDrawer() 打开我的 sidedrawer 组件时，出现此错误。 我尝试将抽屉组件嵌套在 NavigationCOntainer 中，但这不起作用 预期的行为是侧边抽屉在单击图标时滑入

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;

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;

Answer 1

为了使用 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;

希望这有帮助!