Nesting multiple navigators

Question

I'm trying to integrate StackNavigator, TabNavigator and DrawerNavigator like this:

class TestApp extends Component {
  render() {
    return (    
        <MyApp />
    );
  }
}

const Tabs = TabNavigator({
  Home1: { screen:Home1 },
  Home2: { screen:Home2 },
  },
  { 
  tabBarPosition: 'bottom',
}); 

const Drawer = DrawerNavigator({
  First:{
    screen: DrawerScreen1
  },
  Second:{
    screen: DrawerScreen2
  }
},{
  initialRouteName:'First',
  drawerPosition: 'left'
});

const MyApp = StackNavigator({
  Screen1: {screen:Screen1},
  Screen2: {screen:Screen2},
  Tabs: {
     screen: Tabs
  },
  Drawer:{
    screen: Drawer
  }
}, {
   initialRouteName: "Tabs"
});


AppRegistry.registerComponent('TestApp', () => TestApp);

Calling the drawer:

<Button
  onPress={() => this.props.navigation.navigate('DrawerOpen')}
  title="Show Drawer"
/>

It does not open the drawer. It opens the DrawerScreen1 as if I'm calling it from StackNavigator. It opens the component with a back button. I want to open the drawer.

DrawerScreen1:

export default class DrawerScreen1 extends Component{
  static navigationOptions = {
    drawerLabel: 'Home',
    drawerIcon: ({ tintColor }) => (
       <Image
        source={require('./myImage.png')}
        style={height:100, width: 100}
       /> 
    ),
  };
render() {
    return (
      <Button
        onPress={() => this.props.navigation.navigate('DrawerOpen')}
        title="DrawerOpen"
      />
    );
  }
}

DrawerScreen2 is similar. What am I missing? Please help.