反应原生抽屉切换不起作用

Question

drawerNavigator位于stackNavigator中。

我将标题设置为无，我想按下按钮时使标题部分工作。

我写了以下代码。

this.props.navigation.dispatch（DrawerActions.toggleDrawer（））;

没有错误发生。但它没有做任何事情。

导航器代码如下所示：

navigator.js

const MainScene = createStackNavigator({
 MainTab: {screen: MainTab},
 OtherScene: {screen: OtherScene}
},{...})

const OtherScene: createStackNavigator({
 DrawerScene: {screen: DrawerScene}
},{...})

const DrawerScene = createDrawerNavigator({
 Page1: {screen: Page1},
 Page2: {screen: Page2},
},{...})

Header.js

_sideMenu() {
 this.props.navigation.dispatch(DrawerActions.toggleDrawer());
}

render() {
  return (
   ...
   <TouchableOpacity 
    onPress={() => this._sideMenu()}>
    <Image ... />
   </TouchableOpacity>
   ...
  )
 }

page1和page2都包含直接写入的标题。

Page1.js

render() {
 return(
  <View>
   <Header navigation={this.props.navigation} />
   ...
  </View>
 )
}

Answer 1

一个解决方案是将stackNavigator放在drawerNavigation中，如下所示：

const MainScene = createStackNavigator({
 MainTab: {screen: MainTab},
 OtherScene: {screen: OtherScene}
},{...})

const OtherScene: createStackNavigator({
 SomeOtherScene: {screen: SomeOtherScene} // remove the drawer from here
},{...})

const DrawerScene = createDrawerNavigator({
 Page1: {screen: Page1},
 Page2: {screen: Page2},
 MainScene: {
     screen: MainScene, 
     navigationOptions: {
         drawerLabel: () => null
    }},
 OtherScene: {
     screen: OtherScene, 
     navigationOptions: {
         drawerLabel: () => null
    }},
},{initialRoute: "MainScene"})

这样你就不会遇到未定义的open / close / toggleDrawer函数的问题，你甚至可以像这样使用它们：this.props.navigation.toggleDrawer（）;

如果您不希望“MainScene”和“OtherScene”出现在抽屉中，则只需为其抽屉返回null标签

Answer 2

尝试从“react-navigation”导入{DrawerActions};

this.props.navigation.dispatch（DrawerActions.openDrawer（））;

this.props.navigation.dispatch（DrawerActions.closeDrawer（））;