来自子导航器屏幕的 openDrawer()答案

【问题标题】：openDrawer() from a screen of a child navigator来自子导航器屏幕的 openDrawer()
【发布时间】：2020-01-10 01:29:52
【问题描述】：

我有以下 react-native 代码：

import React from 'react';
import {AppRegistry} from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator} from 'react-navigation-stack';
import { createDrawerNavigator} from 'react-navigation-drawer';
import {View,Text,Button} from 'react-native';

class Sub extends React.Component {
  static navigationOptions = {
    headerTitle: () => (
      <Button
        onPress={() => this.props.navigation.dangerouslyGetParent().openDrawer()}
        title="Open Drawer"
      />
    ),
  };
  render() {
      const props = this.props;
      return (
        <View>
        <Text>{props.navigation.state.routeName}</Text>
        <Button onPress={_=>props.navigation.navigate("Sub1")} title="Sub1" />
        <Button onPress={_=>props.navigation.navigate("Sub2")} title="Sub2" />
        </View>
      );
  }
}

const SubRoutes = {
    "Sub1":Sub
};

const SubNavigator = createStackNavigator(SubRoutes);

const SubApp = createAppContainer(SubNavigator);

const MainRoutes = {
    "Main1":SubApp
};

const MainNavigator = createDrawerNavigator(MainRoutes);

const App = createAppContainer(MainNavigator);

AppRegistry.registerComponent("nav", () => App);

它将 StackNavigator 呈现为 DrawerNavigator 的子项。在Sub 屏幕中，我有一个带有按钮的headerTitle，单击时，我想打开抽屉导航器的抽屉菜单。现在点击按钮只会给出Sub.props.navigation不存在的错误。

如何在单击标题按钮时打开抽屉菜单？

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

请将您的navigationOptions 代码修改为：

  ...
  static navigationOptions = ({navigation}) => ({
    headerTitle: () => (
      <Button
        onPress={() => navigation.openDrawer()}
        title="Open Drawer"
      />
    )
  });
  ...

【讨论】：