RN和React路由详解及对比

在平时 H5 或者 RN 开发时，我们业务场景中大部分都不是单页面的需求，那这时我们就能使用路由在进行多页面的切换。下面会对比一下 react 路由和 RN 路由的本质区别和使用方法。

路由（routing）是指分组从源到目的地时，决定端到端路径的网络范围的进程

使用 React 构建的单页面应用，要想实现页面间的跳转，首先想到的就是使用路由。在 React 中，常用的有两个包可以实现这个需求，那就是 react-router 和 react-router-dom。本文主要针对 react-router-dom 进行说明

在根组件上配置路由，引用 react-router-dom 结构 {HashRouter as Router, Route ,Link ,Redirect ,Switch}，HashRouter 组件是路由的根组件，定义属性和方法传递给子组件。Router 组件进行路由，指定每个路由跳转到相应的组件。Link 组件指定跳转链接。Redirect 组件路由重定向，不管什么情况下，都会跳转当前指定的路径，和 switch 组件联合起来一起调用，当路径匹配到路由，不在往下匹配

HashRouter：利用监听 hash 变化（有一个事件 hashchange）实现路由切换，它是路由容器，
渲染子组件，并向下层子组件传递（Context 上下文传递）loaction,history 等路由信息
BrowserHistory：利用 H5Api 实现路由切换，是路由容器，渲染子组件，
并向子组件传递 loaction,history 等路由信息

HashRouter 只是一个容器，本身并没有 DOM 结构
它渲染的就是它的子组件，并向下层传递 location
组件挂载完成之后根据 hash 改变 pathname 的值，如果没有 hash 值就默认展示根组件
需要跳转路由页面时我们使用 link 或者 push 去赋值 hash 的 pathname 如 this.props.history.push({pathname: preview, param: {pic, index} });
当 hash 值发生变化的时候会通过 hashchange 捕获变化，并给 pathname 重新赋值
拿到上下文中传过来的 location，然后取出 pathname。再对它的子组件进行遍历，如果子组件的 path 属性和当前上下文中传过来的 pathname 属性相匹配就进行渲染，若不匹配就返回 null。

React 路由是实质就是，根据遍历识别路由的 pathname，来切换 router 路由容器中 component 组件的加载渲染。每次更改 pathname 就都是组件的重新渲染流程，页面也都会呈现出刷新的效果。

RN 把导航和路由都集中到了 react-navigation 库里面
组件使用堆栈式的页面导航来实现各个页面跳转
构造函数：StackNavigator(RouteConfigs, StackNavigatorConfig)
- RouteConfigs：页面路由配置
- StackNavigatorConfig：路由参数配置

navigationOptions：配置 StackNavigator 的一些属性。title：标题，如果设置了这个导航栏和标签栏的 title 就会变成一样的，不推荐使用
    header：可以设置一些导航的属性，如果隐藏顶部导航栏只要将这个属性设置为 null
    headerTitle：设置导航栏标题，推荐
    headerBackTitle：设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题。可以自定义，也可以设置为 null
    headerTruncatedBackTitle：设置当上个页面标题不符合返回箭头后的文字时，默认改成 "返回"
    headerRight：设置导航条右侧。可以是按钮或者其他视图控件
    headerLeft：设置导航条左侧。可以是按钮或者其他视图控件
    headerStyle：设置导航条的样式。背景色，宽高等
    headerTitleStyle：设置导航栏文字样式
    headerBackTitleStyle：设置导航栏‘返回’文字样式
    headerTintColor：设置导航栏颜色
    headerPressColorAndroid：安卓独有的设置颜色纹理，需要安卓版本大于 5.0
    gesturesEnabled：是否支持滑动返回手势，iOS 默认支持，安卓默认关闭
 
 
screen：对应界面名称，需要填入 import 之后的页面
 
mode：定义跳转风格
 
   card：使用 iOS 和安卓默认的风格
 
   modal：iOS 独有的使屏幕从底部画出。类似 iOS 的 present 效果
 
headerMode：返回上级页面时动画效果
 
   float：iOS 默认的效果
 
   screen：滑动过程中，整个页面都会返回
 
   none：无动画
 
cardStyle：自定义设置跳转效果
 
   transitionConfig：自定义设置滑动返回的配置
 
   onTransitionStart：当转换动画即将开始时被调用的功能
 
   onTransitionEnd：当转换动画完成，将被调用的功能
 
path：路由中设置的路径的覆盖映射配置
 
initialRouteName：设置默认的页面组件，必须是上面已注册的页面组件
 
initialRouteParams：初始路由参数

react：

在 react 中初始化时没有指定 hash 值，route 会匹配路由表里面的根组件”/”

RN：

RN 需要在 StackNavigatorConfig 里面指定首页

在入口路由列表注册完成之后在导航器中的每一个页面，都有 navigation 属性通过提供的 navigate 方法来提供跳转

在导航器中每一个页面都有 navigation 属性，该属性有以下几个属性 / 方法
navigate 跳转到其他页面常用参数如下
- routeName 导航器中配置的路由名称
- params 传递到下一个页面的参数
state：state 里面包含有传递过来的参数 params、key、路由名称 routeName
setParams 更改当前页面路由参数（后面详细介绍）
goBack：回退可穿参数

RN和React路由详解及对比

前言

React 路由

简介

两类路由

路由配置

路由实现原理

总结

RN 路由

简介

路由配置

参数详解

路由首页

RN 路由使用

navigation

navigate

setParams