在 React-Native 中，尝试访问从标题返回按钮中的堆栈导航器打开的抽屉

Question

我是本机反应的新手，我想访问从 launch.js 中的堆栈导航打开的主页抽屉

launch.js

import * as React from 'react';
import {Button, View} from 'react-native';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {Home, Login} from './screens';

const Drawer = createDrawerNavigator();
const AuthStack = createStackNavigator();
const LoginStack = createStackNavigator();
const HomeStack = createStackNavigator();

const LoginUI = ({navigation}) => {
  return (
    <LoginStack.Navigator>
      <LoginStack.Screen name="login" component={Login}></LoginStack.Screen>
    </LoginStack.Navigator>
  );
};

const HomeUI = ({navigation}) => {
  const closeDraw = () => {
    navigation.openDrawer();
  };
  return (
    <Drawer.Navigator initialRouteName="home">
      <Drawer.Screen name="home" component={Home} />
    </Drawer.Navigator>
  );
};

export default function App() {
  return (
    <NavigationContainer>
      <AuthStack.Navigator>
        <AuthStack.Screen name="login" component={LoginUI}></AuthStack.Screen>
        <AuthStack.Screen
          name="home"
          component={HomeUI}
          options={{
            headerLeft: () => (
              <Button
                title="ham"
                onPress={() => {
                  navigation.openDrawer();
                }}></Button>
            ),
          }}></AuthStack.Screen>
      </AuthStack.Navigator>
    </NavigationContainer>
  );
}

screens.js

import * as React from 'react';
import {Button, View} from 'react-native';

export const Home = ({navigation}) => {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Button onPress={() => navigation.goBack()} title="Logout" />
    </View>
  );
};

export const Login = ({navigation}) => {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Button onPress={() => navigation.navigate('home')} title="Login" />
    </View>
  );
};

我正面临以下错误消息。

错误

Error I am facing

我尝试了 this.props.navigation.openDrawer() 也没有帮助我，请帮助解决这个问题。

谢谢。

Answer 1

您没有提供导航访问权限，您可以通过更改如下代码来实现

<AuthStack.Screen
          name="home"
          component={HomeUI}
          options={({navigation})=>({
            headerLeft: () => (
              <Button
                title="ham"
                onPress={() => {
                  navigation.openDrawer();
                })}></Button>
            ),
          }}></AuthStack.Screen>