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

1：目录结构

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：打开之后显示

2：点击跳过主页

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

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

地址：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：具体见路由页