如何在抽屉导航器中定义的屏幕中打开抽屉导航器

Question

是否可以从我不希望它出现在我的抽屉导航器中的屏幕上打开抽屉导航器

const AppDrawerNavigator = createDrawerNavigator({
  Home:{
    screen:MainStackNavigator,//stack with tab
  },
  Pdf:{
    screen:AnotherScreen
  }
},
{
  drawerPosition: 'left',
  drawerWidth:Dimensions.get('window').width-50,

})

这是我的堆栈导航器

const AppStackNavigator = createStackNavigator({
  Main:{screen:AppDrawerNavigator,navigationOptions: {
    header: null,
  }},
  Login:{screen:LoginScreen},

  Map:{screen:MapScreen,navigationOptions:({navigation})=>({
    headerLeft:null,
    headerTransparent:true,
    headerRight:
        <TouchableOpacity
         onPress={()=>navigation.toggleDrawer()}>
           <IconMenu name='menu' size={25} style={{marginRight:20}} />
         </TouchableOpacity>})},
})

我希望 MapScreen 打开我上面定义的抽屉（它不工作，它说导航未定义。toggleDrawer() 不是一个函数，当我点击我的 IconMenu 时）

谢谢你

Answer 1

使用它来打开或关闭抽屉

this.props.navigation.dispatch(DrawerActions.toggleDrawer());

在您的代码中，您可以使用 as

navigation.dispatch(DrawerActions.toggleDrawer());

Answer 2

您需要发送带有动作的 NavigateAction 来切换抽屉。

试试这个：

  headerRight: () => {
    const navigateAction = NavigationActions.navigate({
      routeName: "Main",
      action: DrawerActions.toggleDrawer()
    });

    return (
        <TouchableOpacity
         onPress={()=> navigation.dispatch(navigateAction)}>
       <IconMenu name='menu' size={25} style={{marginRight:20}} />
     </TouchableOpacity>})},
    );
  }

你应该像这样导入 NavigateActions 和 DrawerActions：

import { createAppContainer, NavigationActions } from "react-navigation";
import { createDrawerNavigator, DrawerActions } from "react-navigation-drawer";

action 在 routeName 中执行，在你的情况下是 DrawerNavigation

Here is the link to docs

And here is a snack example