RN和React路由详解及对比

前言

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

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

React 路由

简介

使用 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 组件联合起来一起调用，当路径匹配到路由，不在往下匹配

两类路由

1. HashRouter：利用监听 hash 变化（有一个事件 hashchange）实现路由切换，它是路由容器，

   渲染子组件，并向下层子组件传递（Context 上下文传递）loaction,history 等路由信息

2. 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 路由

简介

• 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 里面指定首页

RN 路由使用

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

navigation

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

navigate

setParams