页面间通信

在携程 App 里面 Native-Hybrid-RN 是可以相互跳转的。

大部分场景都是通过 openURL 实现跳转，URL 规则可以参考文档：URL 规则说明

RN - Native

RN 跳到 native 页面有两种方式：

openURL 打开支持 ctrip:// 协议的 Native 页面
plugin

RN 跳 Native页面 openURL(ctrip://) 实现

这种方式是通用方式，需要 Native 业务支持，这种方式暂时不支持从 Native 页面返回 RN 页面时回传数据。

下面是 RN 页面跳国际机票查询页示例：

import {URL} from '@ctrip/crn';

URL.openURL('ctrip://wireless/flight_inland_inquire');

RN 跳 Native页面，plugin实现

第二种方式是 Native 业务方自行开发出 plugin 接口供 RN 调用，这方式可以很好地通过回调函数实现数据从 Native 页面传回 RN 页面。

下面是支付的例子，通过支付提供的接口可以调起支付页面：

import {Pay} from '@ctrip/crn';

Pay.regularPay(token, extend, orderSummary, (status, result) =
>
 {
 ....
});

Native 跳 RN 页面

通过 openURL 打开 RN URL 即可，不支持 RN 页面返回时回传数据。

RN - Hybrid

通过 openURL 的方式实现，支持从 Hybrid 页面回传数据到 RN 页面。

// RN 代码

import {URL} from '@ctrip/crn';

URL.openURLWithCallback('http://m.ctrip.com/test.html', (result) =
>
 {
 console.log(JSON.sringify(result));
});

Hybrid 代码需要调用app_back_to_last_page接口回传数据，具体文档：app_back_to_last_page

CtripUtil.app_back_to_last_page('This is a json string for my previous page');

Hybrid 跳 RN 页面

通过 openURL 的方式实现，不支持 RN 页面返回时回传数据。

RN - RN

RN 跳 RN 页面分为两种：

跳到另一个业务
当前页面内导航跳转

第一种方式直接通过openURL即可，参数传 RN URL 即可，这种方式目前不支持数据回传。

第二种方式请参考App、Page、ViewPort - CRN 三大基础组件详解中的 Page 组件相关文档。

3.页面间通信