How to use navigationOptions to trigger navigate() of a StackNavigator?

Question

I'm trying to learn how to use react-navigation. I have a small piece of code here:

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 = ({screenProps,navigationOptions,navigation}) => ({
    headerTitle: () => (
      <Button
        onPress={() => navigation.openDrawer()}
        title="Open Drawer"
      />
    ),
    headerRight: () => (
      <Button
        onPress={() => screenProps.navigate("Sub2")}
        title="Go Sub2"
      />
    )
  });
  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 MainRoutes = {
    "Main1":SubNavigator
};

const MainNavigator = createDrawerNavigator(MainRoutes);

const App = createAppContainer(MainNavigator);

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

It creates a screen that has a header with one button that says "Open Drawer" and another button that says "Go Sub2". When I press the "Open Drawer" button, the drawer menu slides open as expected. When I press "Go Sub2", the app crashes with the error screenProps.navigate is not defined. screenProps.navigation.navigate also produces similar errors. How do I get the "Go Sub2" to trigger the StackNavigator to load the Sub2 screen?

I suppose the main source of my confusion is how to access the navigation object of the StackNavigator instead of the DrawerNavigator.