嵌套多个导航器

Question

我试图像这样整合StackNavigator，TabNavigator和DrawerNavigator：

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);

打电话给抽屉：

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

它没有打开抽屉。它会打开DrawerScreen1，就好像我是从StackNavigator调用它一样。它用后退按钮打开组件。我想打开抽屉。

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很相似。我错过了什么？请帮忙。