React native中DrawerNavigator,StackNavigator,TabNavigator导航栏使用

 import React from 'react';
 import { View, Text,Button } from 'react-native';
 import { DrawerNavigator,StackNavigator,TabNavigator  } from 'react-navigation';
 /*
 * 主屏幕，可以跳转至Tab Navigator和DrawerNavigator*/
 const HomeScreen = ({ navigation }) => (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
         <Text>Home Screen</Text>
         <Button
             onPress={() => navigation.navigate('Details1')}
             title="Go to details1"
         />
         <Button
             onPress={() => navigation.navigate('Details2')}
             title="Go to details2"
         />
     </View>
 );
 /*次屏幕一
 * 用于承接TabNavigator
 * */
 const DetailsScreen1 = () => (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
         <Text>Details1 Screen</Text>
     </View>
 );
 /*
 * 次屏幕二
 * 用于承接DrawerNavigator
 * */
 const DetailsScreen2 = () => (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
         <Text>Details2 Screen</Text>
     </View>
 );
 /*
 * TabNavigator主屏幕
 * */
 const HoScreen = () => (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
         <Text>Ho Screen</Text>
     </View>
 );
 /*
 * TabNavigator次屏幕
 * */
 const ProfileScreen = () => (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
         <Text>Profile Screen</Text>
     </View>
 );
 /*TabNavigator
 * */
 const RootTabs = TabNavigator({
     Ho: {
         screen: HoScreen,
     },
     Profile: {
         screen: ProfileScreen,
     },
 });
 /*
 * DrawerNavigator主屏幕
 * */
 const HScreen = ({navigation}) => (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
         <Text>H Screen</Text>
         <Button
             onPress={() => navigation.navigate('DrawerToggle')}
             title="Open Drawer"
         />
     </View>
 );
 /*
 * DrawerNaivigator
 * 次屏幕
 * */
 const ProScreen = () => (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
         <Text>Pro Screen</Text>
     </View>
 );
 /*
 * DrawerNavigator
 * */
 const RootDrawer = DrawerNavigator({
     H: {
         screen: HScreen,
     },
     Pro: {
         screen: ProScreen,
     },
 });
 /*
 *
 * StackNavigator
 * */
 const RootNavigator = StackNavigator({
     Home: {
         screen: HomeScreen,
         navigationOptions: {
             headerTitle: 'Home',
             headerRight: <Button title="Info" />,
         },
     },
     Details1: {
         screen: RootTabs,
         navigationOptions: {
             headerTitle: 'Details1',
         },
     },
     Details2: {
         screen: RootDrawer,
         navigationOptions: {
             headerTitle: 'Details2',
         },
     },
 });
 export default class App extends React.Component {
     render() {
         return <RootNavigator/>;
     }
 }

 效果图