Jak otworzyć drawer nawigator z nagłówka stack nawigatora?

Przekazanie opcji otwarcia drawer navigatora do nagłówka stack nawigatora jest dość proste, choć początkowo może przysporzyć problemów. Widać to choćby po ilości pytań zadawanych na portalach programistycznych. Dlatego przedstawię tutaj skróconą wersję kodu, który pokaże, jak osiągnąć taki efekt.

W drawer nawigatorze jako ekran główny ustawiamy stack nawigator

DrawerNavigator.js

const MyDrawerNavigator = createDrawerNavigator({
    Home: {screen: StackNavigator},
    ...
},
{
    initialRouteName: 'Home',
    contentComponent: ContentComponent,
    drawerWidth: Dimensions.get('window').width,
    drawerPosition: 'left',
    drawerBackgroundColor: 'transparent',
}
);

const AppContainer = createAppContainer(MyDrawerNavigator);

export default class DrawerNavigator extends Component {
    render() {
        return <AppContainer />;
    }
}

Do stack nawigatora przekazujemy opcję otwarcia drawer navigatora w postaci screenProps.

StackNavigator.js

const AppContainer = createAppContainer(MyStackNavigator);

export default class StackNavigator extends Component {
  render() {
    return <AppContainer screenProps={{ openDraw: () => this.props.navigation.dispatch(DrawerActions.openDrawer()) }} />;
  }
}

Następnie w ekranie głównym stack nawigatora odczytujemy screenProps i przypisujemy utworzonemu przyciskowi opcję otwarcia drawer nawigatora.

HomeScreen.js

static navigationOptions = ({ screenProps }) => ({
      title: 'Home',
      headerLeft: (
          <Button onPress={() => screenProps.openDraw() }
              title="OPEN"
              color="red"
          />
      ),
})

Efekt: