React-Native之（小白计划二）StackNavigator结合TabNavigator

旧城等待， 2022-05-23 05:41 251阅读 0赞

# 1：目录结构 #

![70][]

# 2：App.js页 #

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

# 3：AppStackNavigators（路由页） #

import React from 'react';
    import {
        createStackNavigator,
        createTabNavigator,
    } from 'react-navigation';
    
    import Ionicons from 'react-native-vector-icons/Ionicons';
    import Page1 from '../pages/Page1';
    import Page2 from '../pages/Page2';
    import Page3 from '../pages/Page3';
    import Home from '../pages/HomePage'
    
    
     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,//字体距离图标大小
            },
    
        }
    
    });
    
    export const AppStackNavigator=createStackNavigator({     //顶部导航
        Home:{
           screen:Home
        },
        TabNav:{
            screen:AppTabNavigators,
            navigationOptions:{
                title:"This is TabNav"
            }
        },
    
    } );

# 4：HomePage页 #

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="跳过主页"
                        onPress={()=>navigation.navigate('TabNav')}
                    />
                </View>
            );
        }
    }
    
    const styles = StyleSheet.create({
        container: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#e5fffd',
        }
    });

# 5：page1，page2，page3页(展示一页) #

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',
        }
    });

# 效果： #

##### 1：打开之后显示 #####

![70 1][]

##### 2：点击跳过主页 #####

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

##### 3：点击标题上的（<-）返回主页 #####

![70 4][]

# 注意：（如何加载小图标） #

地址：https://github.com/oblador/react-native-vector-icons

查看图名称：https://ionicframework.com/docs/ionicons/

如何使用：

1： npm install react-native-vector-icons --save

2：react-native link

3：具体见路由页

[70]: /images/20220523/31f35093c52f46f9bbfa380253a4fcc7.png
[70 1]: /images/20220523/10889e2cf8334740b2f4f3a5f4adf742.png
[70 2]: https://img-blog.csdn.net/2018060311235054?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lVX01fSw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 3]: /images/20220523/9073376da7854c71aa3e0307ee2235b6.png
[70 4]: /images/20220523/165d259f31c5466299c90187ee31c754.png