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

时间:2019-12-12 11:31:16

标签: android react-native react-navigation

是否可以从我不想放入抽屉导航器的屏幕上打开抽屉导航器

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打开上面定义的抽屉(它不起作用,它说导航未定义。当我单击我的IconMenu时,toggleDrawer()不是函数)

向你致敬

2 个答案:

答案 0 :(得分:0)

使用它来打开或关闭抽屉

ALTER TABLE Sessions ADD FOREIGN KEY (_SettingsID) REFERENCES settings (id)

在您的代码中,您可以用作

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

答案 1 :(得分:0)

您需要发送带有操作的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";

操作在routeName中执行,在您的情况下为DrawerNavigation

Here is the link to docs

And here is a snack example