ReactNative跳转协议

最新推荐文章于 2025-02-28 17:06:48 发布

非鹭千里

最新推荐文章于 2025-02-28 17:06:48 发布

阅读量1.6k

点赞数

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/dodan/article/details/52429826

版权

 
 ============================================================== 

RN模块内跳转，部分照旧，增加是否采用native加载下一个RN页面选项

 
 1. 模块声明中没有暴露的页面this.props.navigator.push({ screen:require('$relativePath'), //此处screen为页面component props:{ /* 传递给页面的属性 */ }});2. 模块声明中有暴露的页面this.props.navigator.push({ native: boolean, //是否使用native加载下一个RN页面 screen:'$module.$page', //此处screen为 "模块名.页面名" props:{ /* 传递给页面的属性 */ }}); 

 
 ============================================================== 

 
 RN模块间跳转 
 ，部分照旧，增加是否采用native加载下一个RN页面选项

 
 - 页面必须在模块声明中this.props.navigator.push({ native: boolean, //是否使用native加载下一个RN页面 screen:'$module.$page', //此处screen为 "模块名.页面名" props:{ /* 传递给页面的属性 */ }}); 

 
 ============================================================== 

 
 RN跳转Native和H5 

 
 1. rn -> nativethis.props.navigator.push({ screen:'$nativeModule.$nativePage', props:{ /* 传递给页面的属性 */ }, callback: function});2. rn -> h5this.props.navigator.push({ screen:'$h5Module.$h5Page', props:{ /* 传递给页面的属性 */ }, callback: function}); 

 
 ============================================================== 

 
  react-native 跨级 
 回退协议 

 
 /* * 假设目前页面栈: R1->R2->N1->R3 * * R1: 'HomePage.MainPage' 首页模块主页，对外公开 * R2: 'Page2' 首页模块Page2页面，非对外公开，此处`component.displayName`为`Page2` * N1 * R3: 'Finance.MainPage' 理财模块主页，对外公开 */ R3->N1: this.props.navigator.pop(1); R3->R2: this.props.navigator.pop('Page2') 或者 pop(2); R3->R1: this.props.navigator.pop('HomePage.MainPage') 或者 pop(3); 

 
 ============================================================== 