rn中的路由需求文档

一、概念

用来指定如何在app内部实现页面跳转

二、使用场景

  • 端外拉起app后,跳转到指定页面

  • 端内跳转到指定页面

  • h5、native、rn不同的页面之间都可以互相跳转、传递参数

image.png

三、目标

  • 一个UI页面与一个uri关联,用Uri替代我们的页面。

  • 跳转的时候就不需要强依赖UI页面去做匹配,而只需要通过一段字符串去匹配就行

  • 实现页面之间的解耦、跳转、传参

四、优缺点分析

和传统native路由跳转相比较:

  • 简单易读。通过字符串实现跳转页面并传参

  • 页面解耦。实现页面间完全解耦

  • 灵活性强。可通过动态下发不同的字符串,动态控制跳转的逻辑

  • 参数有限制。不支持复杂的数据格式

  • 依赖客户端路由模块的实现

五、技术调研

动态路由方案

  • android

https://juejin.cn/post/7169017197442891806

  • iOS

https://juejin.cn/post/7087875341460439071

六、方案内容

6.1、Uri格式

整体参考uri的格式

基本格式 = protocol://hostname/path = 协议://主机地址/路径

image.png
  • protocal: 协议头,对应吊起app的协议scheme,用于端外,吊起app

  • hostname/path: 域名和路径,用来指定页面形态,native、hrn、h5

  • query: 参数。注意:只支持字符串格式。不包含端口号

    • pName: 页面名称

    • 容器参数:设置容器的初始化参数

    • rcName: rn中指定页面的入口组件

    • 业务参数: 页面内部使用的参数

示例:

app外

protocol://protal/containerType?pName=pageA&query=1

app内

  • rn跳rn, h5跳rn
image.png
  • rn跳native,h5跳native
image.png
  • rn跳h5
image.png

6.2、参数

query信息分为三部分:

  • pName:页面名称【必填】

  • 给容器使用的参数:指定容器的一些行为. 所有字段使用rnc开头

  • 业务参数: 业务内部使用

 protal/hrn?pName=pageA&rncDegradeUrl=www.baidu.com
protal/hrn?pName=pageA&rncDegradeUrl=www.baidu.com&rncDegradeVersion=1.0.0&rncTransparent=1&rcName=index&id=123&name=zhangsan  

6.2.1、容器参数

query参数预留字段,指容器使用的字段:

预留字段命名规范:尽量避免和业务参数重名,推荐添加rn前缀 rnc react-native-container 和 react-native-config的简写

qurey字段名 含义 数据格式 默认值 示例
pName 页面名称。rn里也指bundle的名称 字符串 必填 pName=pageA
rncDegradeUrl 降级的url urldecode以后得url链接 undefined: 默认没有值 https://www.baidu.com
rncDegradeVersion 在某个版本以上降级,更低的版本不允许降级 字符串 undefined:默认没有值,不指定版本 “1.0.0”
rnIsDegrade 是否允许页面降级 字符串, '0' 或者 ‘1’ “0”:不降级 1
rnType 容器类型 "screen" "view" “screen”
rncTransparent 容器是否透明 字符串 “0” ~ “1” “0”: 不透明,可以设置其他0-1之间的值。1:全透明 0
rncHeight 50% 400px
rncRouterType 路由跳转的类型,用来控制是否走全页面触达的逻辑 字符串 base rncRouterType=base;rncRouterType=allPage,当值为allPage的时候,相关参数需要按照全页面触达的要求传参
rncIsTranslucentBar 是否沉浸式导航栏, 字符串 true rncIsTranslucentBar=true
rncBarMode 状态栏文字的颜色 字符串 dark rncBarMode=dark light
hasTitleBar 是否为原始的头部(Android 专用) 字符串 false hasTitleBar=false;hasTitleBar=true;一般情况下不需要传,只有一些特殊页面需要传
字段名 含义 数据格式 默认值 示例
rcName 加载的入口组件名称,registerComponentName 字符串 index name="demo"
其他初始化参数 rn页面初始化的时候,传递的业务参数 字符串 undefined

native需要的参数(技术文档:

https://alidocs.dingtalk.com/i/nodes/XPwkYGxZV3RP27rAFjoLwyaGWAgozOKL?utm_scene=team_space&utm_source=dingdoc_doc&utm_medium=dingdoc_doc_plugin_card

https://alidocs.dingtalk.com/i/nodes/m9bN7RYPWdlGzr1OUl0o9YqAWZd1wyK0?utm_scene=team_space&utm_source=dingdoc_doc&utm_medium=dingdoc_doc_plugin_card

<colgroup><col width="176"><col width="176"><col width="176"><col width="176"><col width="176"></colgroup>

参数名 含义 数据格式
redirectType native跳转的类型 字符串
redirectValue 具体的内容 json字符串

6.2.2、参数的数据格式

下表为支持的数据格式,以及对应的简写,

只支持基本数据格式,不支持数组、字典等复杂的结构

数据格式 iOS的类 Android的类 简写前缀
字符串 NSString String S_
boolean BOOL boolean B_
数字 int NSInteger int I_
数字 float float float F_
数字double double double D_
数组 A_
map M_

示例:

比如需要往目标页面pageA传递三个参数:

  • id:数字类型,1234535

  • name:字符串类型,zhangsan

最终的跳转链接如下:

protal/native?pName=pageA&id=I_1234535&name=S_zhangsan

6.2.3、参数处理逻辑

除pName、rcName、rnc开头的参数,其它参数传递到rn页面内

6.2.4、当前app的现状

  • 暂无通用路由模块,主要以硬编码实现跳转为主。

  • 有全页面触达逻辑,

    • 需要提前配置好,只支持配置好的页面

6.2.5、rn中页面跳转逻辑

image.png
  • Android现在的架构设计,对路由跳转有何影响

  • Android实现页面跳转逻辑的实现是怎么样的,和通用路由协议是否有冲突的地方

    • 是否必须使用全页面触达,如果不通过全页面触达是否有影响

    • 除了全页面触达的逻辑,还有没有实现页面跳转的写法

  • 全页面触达对通用路由协议的影响和相互之间的关系应该是怎么样的

七、风险

  • 安全性

八、收益

九、方案评估结论

十、人员、排期

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,185评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,445评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,684评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,564评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,681评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,874评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,025评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,761评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,217评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,351评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,988评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2 349

推荐阅读更多精彩内容