react native 导航路由组件react-navigation的使用

navigation的几个难点和问题：

1.底部tab是否可以加上中间的大按钮？如果加上，如何触发事件？ js文件放哪？

2.navigation的登录注册页面。成功后应该不能返回刚刚的登录页面？清空页面栈？

3.登录成功跳转到大厅？意图页面？还是当前所在页？弹出model是不是可以解决所有问题？登录成功如何重刷当前页？

一、前言

在 React Native 中，官方已经推荐使用 react-navigation 来实现各个界面的跳转和不同板块的切换。 react-navigation 主要包括三个组件：

TabNavigator 切换组件，用来实现同一个页面上不同界面的切换，即tab选项卡
StackNavigator 导航组件，用于实现各个页面之间的跳转，即页面跳转（通过stack栈记录）
DrawerNavigator 抽屉组件，可以实现侧滑的抽屉效果

本次我们主要说说前两个，DrawerNavigator 笔者不曾使用

（一）、怎么使用navigation（入口和概览）

export default class Navigator extends Component {
　　render() {
　　　　return(
　　　　　　<Navigator />
　　　　)
　　}
}
const Navigator = StackNavigator(StackRouteConfigs, StackNavigatorConfigs)

上面的StackNavigator就是react-navigation 的导航组件：

StackNavigator 导航组件，用于实现各个页面之间的跳转，即页面跳转（通过stack栈记录）

那么它的两个参数 StackNavigator(StackRouteConfigs, StackNavigatorConfigs) 又是干啥的呢？

（二）、怎么使用StackNavigator

const StackRouteConfigs = {
    MainTab: {
        screen: MainTab,
        navigationOptions: ({navigation}) => ({
           //主页大厅的tab及其相关页面
        }),
    },
    Datail: {
        screen: DatailPage,
        navigationOptions: ({navigation}) => ({

        }),
    },
};

const StackNavigatorConfig = {
    initialRouteName: 'MainTab',    //默认先加载的页面
    navigationOptions: {    //路由页面的配置选项，可定义头部内容、样式
       
    },
    mode: 'card',    //页面跳转方式，card 表示原生系统默认的方式和 modal只针对iOS平台，模态跳转
    headerMode: 'screen',页面跳转时，头部的动画模式，有 float 、 screen 、 none 三种
};

StackRouteConfigs参数表示各个页面路由配置，类似于android原生开发中的 AndroidManifest.xml ，它是让导航器知道需要导航的路由对应的页面。

StackNavigatorConfigs参数表示导航器的配置，包括导航器的初始页面、各个页面之间导航的动画、页面的配置选项等等：

initialRouteName - 导航器组件中初始显示页面的路由名称，如果不设置，则默认第一个路由页面为初始显示页面
initialRouteParams - 给初始路由的参数，在初始显示的页面中可以通过 this.props.navigation.state.params 来获取
navigationOptions - 路由页面的配置选项，它会被 RouteConfigs 参数中的 navigationOptions 的对应属性覆盖。
paths - 路由中设置的路径的覆盖映射配置
mode - 页面跳转方式，有 card 和 modal 两种，默认为 card ：
    card - 原生系统默认的的跳转
    modal - 只针对iOS平台，模态跳转
headerMode - 页面跳转时，头部的动画模式，有 float 、 screen 、 none 三种：
    float - 渐变，类似iOS的原生效果
    screen - 标题与屏幕一起淡入淡出
    none - 没有动画
cardStyle - 为各个页面设置统一的样式，比如背景色，字体大小等
transitionConfig - 配置页面跳转的动画，覆盖默认的动画效果
onTransitionStart - 页面跳转动画即将开始时调用
onTransitionEnd - 页面跳转动画一旦完成会马上调用

StackNavigatorConfigs配置选项