React-Native之（小白计划三）StackNavigator+TabNavigator+DrawerNavigator

目录：

1:App.js页

import {AppStackNavigator} from "./navigations/AppNavigators";
export  default AppStackNavigator;

2:AppNavigatros页（路由页）

import React from 'react';
import {
    createStackNavigator,
    createTabNavigator,
    createDrawerNavigator,
} from 'react-navigation';

import Ionicons from 'react-native-vector-icons/Ionicons';//图标库（参考小白计划二）
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';//图标库

import Home from '../pages/HomePage'

import  Page1 from '../pages/Page1';
import  Page2 from '../pages/Page2';
import  Page3 from '../pages/Page3';

import  Page4 from '../pages/Page4';
import  Page5 from '../pages/Page5';


//底部导航
 const AppTabNavigators =createTabNavigator({
    Page1: {
        screen:Page1,
        navigationOptions: {
            tabBarLabel: 'page1',
            tabBarIcon: (({tintColor, focused}) => (
                                   name={focused?'ios-home':'ios-home-outline'}
                    size={26}
                    style={{color:tintColor}}
               />
            ))
        },

    },
    Page2:{
        screen:Page2,
        navigationOptions:{
            tabBarLabel: 'page2',
            tabBarIcon: (({tintColor, focused}) => (
                                    name={focused?'ios-people':'ios-people-outline'}
                    size={26}
                    style={{color:tintColor}}
                />
            ))

        }
    },
    Page3:{
        screen:Page3,
        navigationOptions:{
            tabBarLabel: 'page3',
            tabBarIcon: (({tintColor, focused}) => (
                                    name={focused?'ios-clock':'ios-clock-outline'}
                    size={26}
                    style={{color:tintColor}}
                />
            ))

        }
    }

},{
    tabBarPosition:'bottom',//位置
    tabBarOptions: {
        showIcon: true,//是否显示图标！！！！！！！
        style: {
            height: 45,//底部导航的宽度
            backgroundColor: '#211305',//底部导航的颜色
        },
        labelStyle: {
            fontSize: 12,//字体大小
            marginTop:-2,//字体距离图标大小
        },

    }

});


//抽屉导航
const Drawer= createDrawerNavigator({
    Page4:{
        screen:Page4,
        navigationOptions:{
            drawerLabel:'page4',
            drawerIcon: ({ tintColor }) => (
                                    name="dns"
                    size={26}
                    style={{color:tintColor}}
                />
            ),
        }
    },
    Page5:{
        screen:Page5,
        navigationOptions:{
            drawerLabel:'page5',
            drawerIcon: ({ tintColor }) => (
                                    name="dns"
                    size={26}
                    style={{color:tintColor}}
                />
            ),
        }
    }
},{
    initialRouteName:'Page5',//设置默认打开的页面
    contentOptions:{
        inactiveTintColor:'#4d3a34',//不被选中的颜色
        activeTintColor:'#ff7226',//改变选中之后的颜色
    }
});



//顶部导航，主入口（导出），要放在其他导航后面，（加载顺序）
export const AppStackNavigator=createStackNavigator({
    Home:{
        screen:Home
    },
    TabNav:{    //全部的底部导航
        screen:AppTabNavigators,
        navigationOptions:{
            title:"This is TabNav"
        }
    },
    DrawerNav:{   //全部的抽屉导航
        screen:Drawer,
        navigationOptions:{
            title:"This is DrawerNav"
        }
    }

} );

3：HomePage页（StackNavigator第一个页面）

import React, { Component } from 'react';

import {
    StyleSheet,
    Text,
    View,
    Button,
} from 'react-native';

type Props = {};

export default class App extends Component {
    static navigationOptions = {
        title: '主页',

    };
    render() {
        const {navigation} =this.props;
        return (
            style={styles.container}>
                                    title="go to TabNav"
                    onPress={()=>navigation.navigate('TabNav')}
                />

                

                                    title="go to DrawerNav"
                    onPress={()=>navigation.navigate('DrawerNav')}
                />
            
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#e5fffd',
    }
});

4:page1,page2,page3页(TabNavigator)

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Button,
} from 'react-native';


type Props = {};
export default class Page1 extends Component {

    render() {
        const {navigation}=this.props;
        return (
            style={styles.container}>

                欢迎来到page1
            
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#ffffaa',
    }
});

5：page4,page5页（DrawerNavigator）

import React, { Component } from 'react';
import {

    StyleSheet,
    Text,
    View,
    Button,
} from 'react-native';

type Props = {};
export default class Page4 extends Component {

    render() {
        const {navigation}=this.props;
        return (
            style={styles.container}>
                欢迎来到page4
                                    title="Open Drawer"
                    onPress={()=>navigation.openDrawer()}//打开抽屉
                />
                                    title="Toggle Drawer"
                    onPress={()=>navigation.toggleDrawer()}//打开或关闭抽屉
                />
                                    title="Go to Page5"
                    onPress={()=>navigation.navigate('Page5')}//跳转到page5
                />

            
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#c5ffe1',
    }
});

展示：

1：打开之后第一页

2：点击 go to tabnav

3:点击 <-返回第一页（主页），再点击go to drawernav

4:点击open drawer或者toggle drawer

5:点击page5