无法从堆栈打开抽屉 header React native v5

Question

我想从我的 header 打开我的抽屉，但我想不通，看看我的代码：

import { NavigationContainer,useNavigation,DrawerActions } from '@react-navigation/native';
.
.
.
render({ 
return (
      <Root>
      <NavigationContainer ref={navigationRef}>

        <Stack.Navigator >
          <Stack.Screen name="Mediclic" component={AppDraw}
            options={
              headerLeft: () =>
                <TouchableOpacity style={{ marginLeft: 5 }} onPress={() => navigation.openDrawer() }>
                  <MaterialIcons name='menu' size={28} color={'white'} />
                </TouchableOpacity>,
            }
            } />
</Stack.Navigator>
      </NavigationContainer>
 );
  }
}
const AppDraw = () =>

  <Drawer.Navigator>
    <Drawer.Screen name="Accueil" component={AccueilScreen} />
    <Drawer.Screen name="A propos" component={AboutScreen} />
  </Drawer.Navigator>

如您所见，堆栈导航器和抽屉位于同一个文件中，但仍然无法正常工作就我而言，我得到 TypoErro:undefined is not an object( navigation.opendrawer)

我也试过 dispatch 但是没用

有人可以帮助我吗？我已经为此苦苦挣扎了一个多星期！谢谢

Answer 1

将要打开抽屉的屏幕设为抽屉子级假设我想在 AccueilScreen 中打开抽屉。

我在你的代码中做了什么

使用

children={this.AppDraw} 而不是 component={AppDraw} 然后写

<Stack.Screen name="Accueil" children={this.AppDraw}

而不是

<Stack.Screen name="Mediclic" component={AppDraw}

试试这个，希望对你有帮助

 import { NavigationContainer,useNavigation,DrawerActions } from '@react-navigation/native';
    .
    .
    .
    render({ 
    return (
          <Root>
          <NavigationContainer ref={navigationRef}>
    
            <Stack.Navigator >
              <Stack.Screen name="Accueil" children={this.AppDraw}
                options={
                  headerLeft: () =>
                    <TouchableOpacity style={{ marginLeft: 5 }} onPress={() => navigation.openDrawer() }>
                      <MaterialIcons name='menu' size={28} color={'white'} />
                    </TouchableOpacity>,
                }
                } />
    </Stack.Navigator>
          </NavigationContainer>
     );
      }
    }
     AppDraw = () =>
      <Drawer.Navigator>
        <Drawer.Screen name="Accueil" component={AccueilScreen} />
        <Drawer.Screen name="A propos" component={AboutScreen} />
      </Drawer.Navigator>

Answer 2

我只用这个就解决了这个问题：

onPress={() =>  
navigation.dispatch(DrawerActions.toggleDrawer()) }

如果有人使用抽屉导航V5，我推荐使用这个！

无法从堆栈打开抽屉 header React native v5

Can't open Drawer from stack header React native v5

navigation-drawer

react-native