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/>;
    }
}

 效果图