RN导航02——createBottomTabNavigator结合StackNavigator使用

RN提供导航组件‘react-navigation’中的底部导航createBottomTabNavigator使用如下：

Step1:创建createBottomTabNavigator组件BottomNavigatorComponent.js

import {createAppContainer, createBottomTabNavigator} from 'react-navigation'
import Page1 from './BottomPage1'
import Page2 from './BottomPage2'
import Page3 from './BottomPage3'
/**
 * 底部标签导航
 */
const bottomNavigator = createBottomTabNavigator(
    /**
     * RouteConfigs
     */
    {
        //路由页面1
        bottomPage1: {
            screen: Page1,
        },
        //路由页面2
        bottomPage2: {
            screen: Page2,
        },
        //路由页面3
        bottomPage3: {
            screen: Page3,
        },
    },
    /**
     * BottomTabNavigatorConfig
     */
    {
        // andorid按下返回键将返回initalRouteName，如果设置非initalRouteName则直接结束标签导航
        backBehavior: 'none',
        // 设置首次加载的页面默认为RouteConfig中第一个(指定的必须为Routeonfig中定义的路由页面)
        //initialRouteName: 'bottomPage3',
        // 定义tab顺序的routeNames数组
        //order: ['bottomPage1', 'bottomPage2', 'bottomPage3'],
        //导航栏选项
        tabBarOptions: {
            //设置是否显示tab上图标
            showIcon: true,
            //设置tab激活时文字和图标(前提是tabBarIcon的style设置tintColor)颜色
            activeTintColor: '#fd742f',
            //设置tab未激活文字和图标(前提是tabBarIcon的style设置tintColor)颜色
            inactiveTintColor: '#a6a1aa',
            //设置tab激活时候背景颜色
            activeBackgroundColor:'#e0dce0',
            //设置整个tabbar的样式(背景颜色、高等（ height: 55）)
            style: {backgroundColor: '#f5f4f9', height: 55},
            //设置tab上文字样式(可设置字体大小等、内边距等)
            labelStyle: {fontSize: 16},
            // 设置单个tab样式
            //tabStyle:{backgroundColor:'#9524d3',},
            // 设置是否显示tab文字
            //showLabel: true,
            // 设置tab未激活时候背景颜色
            //inactiveBackgroundColor:'#a4d9ff',
        },
    });

const bottomAppContainer = createAppContainer(bottomNavigator);
export default bottomAppContainer;

底部tabBar某个tab页面(BottomPage2.js)

import React, {Component} from 'react';
import {View, Text, Image, TouchableOpacity} from 'react-native';
export default class BottomPage2 extends Component {
    //用于tabBar导航器内的屏幕
    static navigationOptions = {
        //tabBarVisible:      //显示或隐藏标签栏,默认为true(布尔类型)
        tabBarLabel: '热点',   //通用标题可以用作备用headerTitle和tabBarLabel。
        /**
         * 设置tabBarButton的图像
         * @param focused：  当前tab是否选中
         * @param tintColor：选中的组件icon是否使用默认样式，如果设置此值则图标与
         *                   标签文字(activeTintColor/inactiveTintColor)颜色保持一致
         *                   也可以不设置，根据focused来设置不同的图标满足业务需求。
         */
        tabBarIcon: ({focused, horizontal, tintColor}) => {
            if (focused) {
                return <Image source={require('../../images/hot.png')}
                              style={{width: 22, height: 22, tintColor: tintColor}}/>
            } else {
                return <Image source={require('../../images/hot.png')}
                              style={{width: 22, height: 22, tintColor: tintColor}}/>
            }
        },
        //tab点击回调事件; 参数是一个对象，包含：navigation：屏幕导航道具  defaultHandler：tab按下的默认处理程序
        tabBarOnPress: (event) => {
            //调用组建内默认的实现方法
            event.defaultHandler();
        },
    }

    constructor(props) {
        super(props);
        this.state = {};
        this.jumpOutTabBar = this.jumpOutTabBar.bind(this);
    }

    render() {
        return (<View style={{flex: 1, backgroundColor: '#334aad', justifyContent: 'center', alignItems: 'center'}}>
            <Text style={{color: '#fdfdff', fontSize: 30}}>BOTTOM-热点</Text>
            <TouchableOpacity onPress={this.jumpOutTabBar}>
                <Text style={{
                    color: '#fffefd',
                    fontSize: 16,
                    padding: 5,
                    marginTop: 10,
                    borderRadius: 5,
                    borderWidth: 1,
                    borderColor: '#faf8ff'
                }}>跳出标签导航之外页面</Text>
            </TouchableOpacity>
        </View>);
    }

    jumpOutTabBar() {
        this.props.navigation.navigate('scrollPage');
    }
}

 

Step2:将底部导航添加到栈式导航组件内部StackNavigatorComponent.js（可省略单独使用BottomNavigator）

import {
    createStackNavigator,
    createAppContainer,
} from 'react-navigation';

import Welcome from '../WelcomeComponent'
import ScrollComponent from '../ScrollView_ListView'
import TopNavigator from './TopNavigatorComponent'
import BottomNavigator from './BottomNavigatorComponent'
/**¬
 * 栈式导航
 */
const stackNavigator = createStackNavigator(
    //指定要加载的RN组件
    {
        welcomePage: {
            screen: Welcome,
        },
        scrollPage:{
            screen:ScrollComponent,
        },
        topNavigatorPage: {
            screen: TopNavigator,
            navigationOptions: (navigation, screenProps) => ({
                header: null,
            })
        },
        bottomNavigatorPage: {
            screen: BottomNavigator,
            navigationOptions: ({navigation, screenProps}) => ({
                header: null,
            })
        }
    }
);
const appStackNavigator = createAppContainer(stackNavigator);
export default appStackNavigator;

Step3: index.js中使用

import {AppRegistry} from 'react-native';
//单独使用BottomNavigator
import MBottomNavigatorComponent from './UI/navigator_/BottomNavigatorComponent'
//将BottomNavigator嵌入到StackNavigator中使用
import MStackNavigatorComponent from './UI/navigator_/StackNavigatorComponent'
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => MStackNavigatorComponent);

PS：为了扩展方便在底部导航中的tarBarIcon中使用了自定义图片，当然也可以使用react-native-vector-icons中的图标组件。