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

Myth丶恋晨 2022-05-23 05:50 208阅读 0赞

# 目录： #

![70][]

# 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}) => (
                   <Ionicons
                        name={focused?'ios-home':'ios-home-outline'}
                        size={
      26}
                        style={
      {
      color:tintColor}}
                   />
                ))
            },
    
        },
        Page2:{
            screen:Page2,
            navigationOptions:{
                tabBarLabel: 'page2',
                tabBarIcon: (({tintColor, focused}) => (
                    <Ionicons
                        name={focused?'ios-people':'ios-people-outline'}
                        size={
      26}
                        style={
      {
      color:tintColor}}
                    />
                ))
    
            }
        },
        Page3:{
            screen:Page3,
            navigationOptions:{
                tabBarLabel: 'page3',
                tabBarIcon: (({tintColor, focused}) => (
                    <Ionicons
                        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 }) => (
                    <MaterialIcons
                        name="dns"
                        size={
      26}
                        style={
      {
      color:tintColor}}
                    />
                ),
            }
        },
        Page5:{
            screen:Page5,
            navigationOptions:{
                drawerLabel:'page5',
                drawerIcon: ({ tintColor }) => (
                    <MaterialIcons
                        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<Props> {
        static navigationOptions = {
            title: '主页',
    
        };
        render() {
            const {navigation} =this.props;
            return (
                <View style={styles.container}>
                    <Button
                        title="go to TabNav"
                        onPress={()=>navigation.navigate('TabNav')}
                    />
    
                    <Text/>
    
                    <Button
                        title="go to DrawerNav"
                        onPress={()=>navigation.navigate('DrawerNav')}
                    />
                </View>
            );
        }
    }
    
    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<Props> {
    
        render() {
            const {navigation}=this.props;
            return (
                <View style={styles.container}>
    
                    <Text>欢迎来到page1</Text>
                </View>
            );
        }
    }
    
    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<Props> {
    
        render() {
            const {navigation}=this.props;
            return (
                <View style={styles.container}>
                    <Text>欢迎来到page4</Text>
                    <Button
                        title="Open Drawer"
                        onPress={()=>navigation.openDrawer()}//打开抽屉
                    />
                    <Button
                        title="Toggle Drawer"
                        onPress={()=>navigation.toggleDrawer()}//打开或关闭抽屉
                    />
                    <Button
                        title="Go to Page5"
                        onPress={()=>navigation.navigate('Page5')}//跳转到page5
                    />
    
                </View>
            );
        }
    }
    
    const styles = StyleSheet.create({
        container: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#c5ffe1',
        }
    });

# 展示： #

##### 1：打开之后第一页 #####

![70 1][]

##### 2：点击 go to tabnav #####

![70 2][]![70 3][]![70 4][]

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

![70 5][]![70 6][]![70 7][]

##### 4:点击open drawer或者toggle drawer #####

![70 8][]

##### 5:点击page5 #####

![70 9][]

[70]: /images/20220523/475973b3ac7e404d92d54f85df70065c.png
[70 1]: /images/20220523/cd1663b12bbd41ed84281b6d531ca9e5.png
[70 2]: https://img-blog.csdn.net/20180603160201991?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lVX01fSw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 3]: https://img-blog.csdn.net/20180603160306111?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lVX01fSw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 4]: /images/20220523/d6d533820fd8455aa9fb4e068e799b45.png
[70 5]: https://img-blog.csdn.net/20180603160546319?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lVX01fSw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 6]: https://img-blog.csdn.net/20180603160613375?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lVX01fSw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 7]: /images/20220523/fa1a9358cd994e718614b1ed13aacef9.png
[70 8]: /images/20220523/39b02c12ee5249f9ad43e64b689b8b4e.png
[70 9]: /images/20220523/ab7e8e1b2ab14c01b4fd819c1c80c3fc.png