前面介绍了react-navigation的StackNavigator、TabNavigator、DrawerNavigator 的基本使用方法，在实际项目中通常需要嵌套这几种导航方式。下面介绍这几种导航方式的嵌套使用方法。
1.StackNavigator与TabNavigator的嵌套
使用StackNavigator与TabNavigator嵌套的App有很多，例如淘宝、京东等，下部选项卡导航，页面中的按钮点击会跳转到二级页面，有的甚至有三级四级页面。
首先用TabNavigator构建出选项卡导航，新建tab的首页MainScreen.js。详细的分解步骤可以参考上一篇的react-navigation的基本使用中TabNavigator的使用介绍。
MainScreen.js
import React from 'react';
import {
AppRegistry,Text,View,Button,StyleSheet,Image,} from 'react-native';
import SecondScreen from "./SecondScreen";
import { TabNavigator } from "react-navigation";
class TabMainScreen extends React.Component {
static navigationOptions = {
tabBarLabel: 'Home',// Note: By default the icon is only shown on iOS. Search the showIcon option below.
tabBarIcon: ({ tintColor }) => (
<Image source={require('../../images/color_for_danmu_normal.png')} style={[styles.icon, {tintColor: tintColor}]} /> ),}; render() { return ( <Button onPress={() => this.props.navigation.navigate('Second')} title="Go to Second" /> ); } } const styles = StyleSheet.create({ icon: { width: 26,height: 26,},}); const TabMainScreenNavigator = TabNavigator( { Main: { screen: TabMainScreen },Second: { screen: SecondScreen },{ tabBarPosition: 'bottom',animationEnabled: true,tabBarOptions: { activeTintColor: '#e91e63',showIcon:'true' },} ); export default TabMainScreenNavigator;
然后是第二个tab页SecondScreen.js
import React from 'react';
import {
AppRegistry,} from 'react-native';
import { StackNavigator } from 'react-navigation';
export default class SecondScreen extends React.Component {
static navigationOptions = {
tabBarLabel: 'Second',tabBarIcon: ({ tintColor }) => (
<Image source={require('../../images/face_unpress.png')} style={[styles.icon,}; render() { return ( <Button onPress={() => this.props.navigation.goBack()} title="Go back home" /> ); } } const styles = StyleSheet.create({ icon: { width: 26,});
这样有如下效果
嵌套StackNavigator
在同一路径下新建MyStackNavigation.js。
import React,{ Component } from 'react';
import {
AppRegistry,} from 'react-native';
import { StackNavigator } from 'react-navigation';
import ThirdScreen from "./ThirdScreen";
import TabMainScreen from "./TabMainScreen";
const MyStackNavigation = StackNavigator({
Main: { screen: TabMainScreen },Third: { screen: ThirdScreen },});
export default MyStackNavigation;
修改之前的TabMainScreen.js
navigationOptions中加上headerTitle导航栏的标题Main
static navigationOptions = {
tabBarLabel: 'Home',headerTitle:'Main',tabBarIcon: ({ tintColor }) => (
<Image source={require('../../images/color_for_danmu_normal.png')} style={[styles.icon,};
主界面中添加一个跳转到第三个页面的按钮。render函数中返回View改为：
render() {
return (
<View style={{ backgroundColor: "#fff",flex: 1,padding: 20}}> <Button onPress={() => this.props.navigation.navigate('Third',{ user: 'Lucy' })} title="Go to Third" /> <View style={{ backgroundColor: "#fff",height: 20}}/> <Button onPress={() => this.props.navigation.navigate('Second')} title="Go to Second" /> </View> ); }
再新建第三个页面ThirdScreen，在同一目录下新建ThirdScreen.js。
import React,{Component} from "react";
import {StyleSheet,Text } from "react-native";
export default class ThirdScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
const {state,setParams} = navigation;
const isInfo = state.params.mode === 'info';
const {user} = state.params;
return {
title: isInfo ? `${user}'s Contact Info` : `Chat with ${state.params.user}`,}; }; render() { return <Text>I am the third Screen</Text> } }
这样就完成了StackNavigator与TabNavigator的嵌套，在要引用的父组件中引用MyStackNavigation即可，例如我的Demo中，入口是App.js，在App.js引用:
import React,} from 'react-native';
import MyStackNavigation from "./src/05_navigation/nestingnavigators/MyStackNavigation";
export default class ExerciseProject extends Component {
render() {
return (
<MyStackNavigation /> ); } } AppRegistry.registerComponent('ExerciseProject',() => ExerciseProject);
效果如下：
源码在这里
2.DrawerNavigator、StackNavigator与TabNavigator的三层嵌套
它们的嵌套关系为：DrawerNavigator>StackNavigator>TabNavigator。
之所以把DrawerNavigator放在最外层是由于如果DrawerNavigator外层还有别的Navigator，则侧滑栏会在父组件的下面，如果父组件是底部TabNavigator，则出现在标签栏上面。那样效果比较怪，与原生开发出的效果不一致。
在上面代码的基础上，新建MyDrawerNavigation.js，设置抽屉导航的首页Home为MyStackNavigation，第二个菜单栏DrawerSecond为DrawerSecondScreen。
import React from 'react';
import {
AppRegistry,} from 'react-native';
import TabMainScreen from "./TabMainScreen";
import DrawerSecondScreen from "./DrawerSecondScreen";
import MyStackNavigation from "./MyStackNavigation";
import { DrawerNavigator } from "react-navigation";
const MyDrawerNavigation = DrawerNavigator(
{
Home: {
screen: MyStackNavigation,navigationOptions: {
drawerLabel: 'Home',drawerIcon: ({ tintColor }) => (
<Image source={require('../../images/color_for_danmu_normal.png')} style={{tintColor: tintColor,width: 24,height: 24,}} /> ),DrawerSecond: { screen: DrawerSecondScreen,navigationOptions: { drawerLabel: 'DrawerSecond',drawerIcon: ({ tintColor }) => ( <Image source={require('../../images/face_unpress.png')} style={ {tintColor: tintColor,} ); export default MyDrawerNavigation;
新建侧滑栏导航栏的第二页DrawerSecondScreen.js
import React from 'react';
import {
Button,} from 'react-native';
import { StackNavigator } from 'react-navigation';
export default class DrawerSecondScreen extends React.Component {
render() {
return (
<View style={{ backgroundColor: "#fff",padding: 20}}> <Button onPress={() => this.props.navigation.goBack()} title="Go back home" /> </View> ); } }
效果如下：
但如此需要从左侧拉出侧滑栏的操作多少有些不便，通常侧滑栏导航在标题栏左侧会有一个按钮，点击可以打开侧滑栏。
打开侧滑栏的关键语句是
this.props.navigation.navigate('DrawerOpen');
修改MyStackNavigation.js，在StackNavigator添加navigationOptions的设置，加上标题栏左侧按钮headerLeft，并顺便将标题居中。MyStackNavigation.js修改后的代码为：
import React,} from 'react-native';
import { StackNavigator } from 'react-navigation';
import ThirdScreen from "./ThirdScreen";
import TabMainScreen from "./TabMainScreen";
const MyStackNavigation = StackNavigator({
Main: {
screen: TabMainScreen,navigationOptions:({ navigation }) => ({
headerTitleStyle:{
alignSelf:'center',headerLeft: (
<Button title='Menu' onPress={() => navigation.navigate('DrawerOpen')} /> ),}),Third: { screen: ThirdScreen,navigationOptions:({ navigation }) => ({ headerTitleStyle:{ alignSelf:'center',headerLeft: ( <Button title='Menu' onPress={() => navigation.navigate('DrawerOpen')} /> ),}); export default MyStackNavigation;
这样通过点击标题栏左侧的Menu按钮，即可打开侧滑栏了：
示例的源码在这里
