出处

https://reactnavigation.org/docs/intro/
提供的主要功能：

• 页面路由（页面跳转） this.props.navigation.navigate(目标页面,参数)
• 三种页面导航结构 StackNavigator（基于栈）、TabNavigator（tab切换）、DrawerNavigator（抽屉风格）

使用

• 页面跳转

使用react-navigation的每个页面的props中会有一个navigation属性，可通过它的navigate方法实现页面跳转

 this.props.navigation.navigate(
            'First',//路由配置中页面唯一标识
            {
                'from':'Page2'//传递的参数
            })

navigation属性如下

navigation属性.png
navigate 用于页面跳转
state 可以看到上一个页面传递过来的参数放在了它的params属性中

• 页面导航的创建

有三种导航，创建方式如下

import {StackNavigator, TabNavigator, DrawerNavigator} from 'react-navigation'
//xxx对应导航类型，分别取Stack、Tab、Drawer
const XXXNav = XXXNavigator(XXXRouteConfig, XXXNavigatorConfig)

XXXNavigator：视图导航构造器
XXXRouteConfig：页面路由配置，主要是声明所包含的页面
XXXNavigatorConfig：视图相关配置，主要

• StackNavigator

效果

StackNavigator.gif

创建

• 界面标题栏的配置信息 相同的配置可以提出来共用，更多配置属性参考官网

const screenConfig = {
    headerStyle: {//标题栏样式
        backgroundColor: 'lightskyblue',
        justifyContent: 'center'
    },
    headerTitleStyle: {//标题样式
        color: 'white',
        alignSelf: 'center'
    },
    headerRight: <View></View>,//这里是为了让标题居中，将标题栏右侧填充一个空View
    headerTintColor:'white'//这个属性可以设置左侧返回箭头颜色
}

• 导航路由配置 声明所需的页面

const StackRouteConfig = {
    First: {//First为该页面唯一标识
        screen: Page1,//页面 即Component
        navigationOptions: screenConfig //前面定义的标题栏配置
    },
    Second: {
        screen: Page2,
        navigationOptions: screenConfig
    }
}

• 导航配置 路由和视图两块配置，更多配置属性参考官网

const StackNavigatorConfig = {
    //路由相关
    initialRouteName: 'Second',//默认启动页面  对应导航路由页面配置中的页面唯一标识
    //视图相关
    headerMode: 'screen'//为每个页面添加一个标题栏
}

• 创建一个栈风格的导航视图 前面的一切配置准备好后，使用构造方法创建即可

const StackNav = StackNavigator(StackRouteConfig, StackNavigatorConfig)

在界面中配置标题栏信息

除了可以在创建导航视图时配置标题栏，还可以在对应页面内通过静态方法navigationOptions设置

export default class Page1 extends BaseComponent {
    //该函数接收当前页面的导航
    static navigationOptions = ({navigation}) => {
        return {
            headerTitle: 'page_1',//这里返回了标题栏的标题
        }
    }
    ...
}

• TabNavigator

效果

TabNavigator.gif

创建

• 导航路由

//tab路由配置 包含哪些页面
const TabRouteConfig = {
    First: {
        screen: Tab1,
    },
    Second: {
        screen: Tab2
    },
    Third: {
        screen: Tab3
    }
}

• 导航配置 主要是对tabbar的配置，更多配置属性参考官网

const TabNavigatorConfig = {
    tabBarPosition: 'bottom',//tabbar的位置
    swipeEnabled: false,//是否允许滑动切换页面
    animationEnabled: false,//是否允许切换动画
    lazy: true,//懒加载
    //initialRouteName: 'Second',//初始定位的页面 默认导航路由中的第一个页面
    tabBarComponent: (params) => <CustomTabBarComp {...params}/>,//自定义tabbar
}

• 创建一个tab风格的导航视图 与StackNavigator别无二致

const TabNav = TabNavigator(TabRouteConfig, TabNavigatorConfig)

嵌套导航

一般应用首页是个tab风格的界面，然后从首页跳转到其他界面，这就是一种嵌套的导航风格

嵌套navigator.gif

• 创建方法

const TabNav = TabNavigator(TabRouteConfig, TabNavigatorConfig)
//把创建的tab视图作为screen添加到stack视图即可
const StackRouteConfig = {
    Tab: {
        screen: TabNav
    },
    Fourth: {
        screen: Page1,
        navigationOptions: screenConfig
    },
    Fiveth: {
        screen: Page2,
        navigationOptions: screenConfig
    }
}
const StackNav = StackNavigator(StackRouteConfig, StackNavigatorConfig)

export default class RootPage extends BaseComponent {

    render() {
        return (
            <StackNav/>
        )
    }
}

• 嵌套视图的跳转

如果嵌套视图中有重名路由B，那么当前页A跳转到B时，会按就近原则选择B页面
比如

const TabRouteConfig = {
    First: {
        screen: Tab1,
    },
    Second: {
        screen: Tab2
    },
    Third: {
        screen: Tab3
    }
}
const StackRouteConfig = {
    Tab: {
        screen: TabNav
    },
    Third: {
        screen: Page1,
        navigationOptions: screenConfig
    },
    Fourth: {
        screen: Page2,
        navigationOptions: screenConfig
    }
}

可以看到tab视图中的Tab2页面和stack视图中的Page1页面路由重名，那么

• 在Tab2中进行页面跳转 结果是切换到Tab3而不是跳转到Page1

this.props.navigation.navigate('Third',{});

• 在Page2中进行页面跳转 结果是跳转到Page1而不是切换到Tab3

this.props.navigation.navigate('Third',{})；