无法从堆栈头打开抽屉 React native v5答案

【问题标题】：Can't open Drawer from stack header React native v5无法从堆栈头打开抽屉 React native v5
【发布时间】：2020-08-17 11:23:17
【问题描述】：

我试图从我的标题打开我的抽屉，但我无法弄清楚，这是我的代码：

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但是没用。

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

【问题讨论】：

您的抽屉在堆栈内，此时导航无法访问抽屉，如果可能，最好重新排序组件
喜欢它有什么问题吗？我该怎么办？
抽屉通常是父级，有什么理由让抽屉在堆栈中？

标签： react-native navigation-drawer

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

将抽屉设为要打开抽屉的屏幕的子级假设我想在 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>

【讨论】：

好的，没问题，我将分享您的抽屉示例，因为我不知道您的代码屏幕