React native react navigation v5-如何切换抽屉

我升级到react navigation V5，对如何让抽屉工作感到困惑。我以前有一个定制抽屉，但现在我只是想让一个样品抽屉工作

我正试图用

this.props.navigation.dispatch（DrawerActions.toggleDrawer（））打开抽屉

以下是相关文件：

MessagesStackRouter.js

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';


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

function DrawerNavigation() {
  return (
     <Drawer.Navigator
      drawerType={"slide"}
     >
      <Drawer.Screen name="Dash" component={DashboardContainer} />
     </Drawer.Navigator>
 );
}

function MessagesStackRouter() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initalRoute="Login"
        screenOptions={{ gestureEnabled: true, headerShown: false }}
        >
        <Stack.Screen name="Login" component={LoginView} />
        <Stack.Screen name="DrawerNavigation" component={DrawerNavigation} />
        <Stack.Screen name="Dashboard" component={DashboardContainer} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default MessagesStackRouter;

从'@react-navigation/native'导入{NavigationContainer}；
从'@react navigation/stack'导入{createStackNavigator}；
从'@react导航/drawer'导入{createDrawerNavigator}；
const Stack=createStackNavigator（）；
const Drawer=createDrawerNavigator（）；
函数DrawerNavigation（）{
返回(
);
}
函数MessagesStackRouter（）{
返回(
);
}
导出默认消息；

App.js

  return (
    <View style={{flex:1, backgroundColor: 'white'}}>
      <StatusBar hidden={true} />
      <Provider store={createStore(reducers)}>
          <MessagesScreenRouter/>
      </Provider>
    </View>
  );

返回(
);

TopNavBar.js的相关部分

import { DrawerActions } from '@react-navigation/native';

class TopNavBar extends Component {

  constructor(props) {
    super(props);

    this.onBurgerBarPress = this.onBurgerBarPress.bind(this)
  }

  onBurgerBarPress() {
    this.props.navigation.dispatch(DrawerActions.toggleDrawer())
  }

  render() {
    return (
      <View style={styles.navBar}>
        <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', marginTop: 10 }}>
          <TouchableOpacity onPress={()=> this.onBurgerBarPress()}>
            <Icon
                name={"Menu"}
                strokeWidth="1.5"
                stroke={'#03A9F4' }
                fill={'#03A9F4'}
              />
          </TouchableOpacity>
        </View>
      </View>
    )
  }
};


const mapStateToProps = (state) => {
  return {
    onboarding: state.onboarding,
    currentUser: state.currentUser
  }
}


export default connect(mapStateToProps, actions)(TopNavBar);

从'@react-navigation/native'导入{DrawerActions}；
类TopNavBar扩展组件{
建造师（道具）{
超级（道具）；
this.onBurgerBarPress=this.onBurgerBarPress.bind（this）
}
OnBarpress（）{
this.props.navigation.dispatch（DrawerActions.toggleDrawer（））
}
render（）{
返回(
this.onBurgerBarPress（）}>
)
}
};
常量mapStateToProps=（状态）=>{
返回{
入职：州。入职，
currentUser:state.currentUser
}
}
导出默认连接（mapStateToProps，actions）（TopNavBar）；

由于没有呈现抽屉导航器所在的屏幕，因此出现错误。您应该将堆栈导航器嵌套在抽屉导航器中，而不是将抽屉嵌套在堆栈中，这样对您的案例更有效。

您会收到一个错误，因为您拥有抽屉导航器的屏幕未呈现。您应该将堆栈导航器嵌套在抽屉导航器中，而不是将抽屉嵌套在堆栈中，这样对您的案例更有效。请检查此@satya164，就是这样--非常感谢！！如果你的答案贴在下面，我很乐意接受：）把它作为答案贴出来

import { DrawerActions } from '@react-navigation/native';

class TopNavBar extends Component {

  constructor(props) {
    super(props);

    this.onBurgerBarPress = this.onBurgerBarPress.bind(this)
  }

  onBurgerBarPress() {
    this.props.navigation.dispatch(DrawerActions.toggleDrawer())
  }

  render() {
    return (
      <View style={styles.navBar}>
        <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', marginTop: 10 }}>
          <TouchableOpacity onPress={()=> this.onBurgerBarPress()}>
            <Icon
                name={"Menu"}
                strokeWidth="1.5"
                stroke={'#03A9F4' }
                fill={'#03A9F4'}
              />
          </TouchableOpacity>
        </View>
      </View>
    )
  }
};


const mapStateToProps = (state) => {
  return {
    onboarding: state.onboarding,
    currentUser: state.currentUser
  }
}


export default connect(mapStateToProps, actions)(TopNavBar);