桥

Router 封装了 QRN 提供的 Native 桥，Router 自身处理了大部分桥，用户用到只会有以下几种：

广播

发送广播

Ext.Router.Bridge.sendBroadcast({
    // 广播名
    name: 'getSomeMsg',
    // 广播内容
    data: {
        msg: 'i tell u a msg'
    },
    // 指定发送目标，不指定则发给全局
    hybridId: 'hotel'
});

接收广播

DeviceEventEmitter.addListener('getSomeMsg', (data) => {
    // 以上面发送广播的 data 为例，接收到的 data 会长这样：
    data = {
        msg: 'i tell u a msg'
    };
});

Scheme

Ext.Router.Bridge.sendScheme(
    {
        // 地址
        url: '',
        // 安卓透明层标识（只有安卓才有）
        adrToken: '',
        // 数据
        data: {
            //类似iOS的popThenPush效果，由于底层机制不同，此标识仅对Adr生效
            adrPopThenPush: true,
            //新增新路由的action方式的回调，设置useAction=true生效，此标识仅对Adr生效
            useAction: true,
            // 是否需求过场动画, 默认为 true
            needTrans: true
        }
    },
    (res) => {
        // 发送后的回调
        res = {
            // 是否成功
            ret: true,
            // 数据
            data: {}
        };
    }
);

sendDeepLinkOrScheme

API 兼容性： iOS:80011295 Android:60001538 QRN:v5.7.4(qrn 升级前项目) v6.1.2(qrn 升级后项目)

Ext.Router.Bridge.sendDeepLinkOrScheme(
    {
        deepLink: 'sinaweibo://searchall?q=uni-app',
        // 地址
        url: 'qunarphone://hy?url=https%3A%2F%2Fwww.qunar.com',
        // 安卓透明层标识（只有安卓才有）
        adrToken: '',
        // 数据
        data: {
            //新增新路由的action方式的回调，设置useAction=true生效，此标识仅对Adr生效
            // useAction: true,
            // 是否需求过场动画, 默认为 true
            // needTrans: true
        }
    },
    (res) => {
        // 发送后的回调
        res = {
            // 是否成功
            ret: true,
            // 数据
            data: {},
            errMessage: '' //仅回调失败的时候有
        };
    }
);

挂载在 `Ext` 上的对象

Router 会通过 Ext.Router 暴露出来。除了所有的 API 外，还暴露了内部的页面容器 Ext.Router._views。

实战

下面将讲述实际使用方法

Native 页面跳转

Router 极大便利了 RN 页面和 Native 页面（包括 HY 页面）的互跳操作。

在阅读下面内容前强烈建议先了解下与 RN 相关环境下的 Scheme：RN-Scheme。

Native -> RN

Native 打开 RN 页面一般有两种方式：

1. 原生方法

通过 native 代码打开，例如 iOS 通过 QRCTVCCreater 方法，详情参考 iOS、Android。

如果首页需要获取从 Native 传入的参数，需要通过 initialProperties.param 携带。

2. 发送 Scheme

通过发送 Scheme 也能跳转到 RN 页面，以 iOS 为例：

@interface JumpHandle : NSObject
/**
 *  通过URL和urlData来调用界面
 *
 *  @param url          跳转到的URL，通常为 qunariphone://hotel/xxx 的形式
 *  @param urldata      处理URL所需使用的数据
 *  @param responseDelg 回调对象
 *  @param userInfo     自定义对象
 *
 *  @return 返回是否有模块接受该URL并进行处理，处理URL可能是异步的，不能保证线程安全
 */
+ (BOOL)jumpHandleOpenURL:(NSURL *)url
              withUrlData:(NSDictionary *)urldata
             responseDelg:(id<JumpHandleResponsePrt>)responseDelg
                 userInfo:(id)userInfo;
@end

RN -> Native

一般通过发 Scheme 方式，举例：

Ext.Router.Bridge.sendScheme({
    url: 'qunariphone://react/debug'
});

以上可以打开一个 native 页面。

HY -> RN

通过 a 标签进行跳转，举例：

<p>
    <a href="qunariphone://react/open?hybridId=qunar_react_native_ext&pageName=pageA"
        >open：强制新开</a
    >
</p>
<p>
    <a
        href="qunariphone://react/biz?hybridId=qunar_react_native_ext&pageName=pageA&forceOpen=true&initProps=%7B%22param%22%3A%7B%22name%22%3A%22wyy%22%7D%7D"
        >biz：强制新开</a
    >
</p>
<p>
    <a
        href="qunariphone://react/biz?hybridId=qunar_react_native_ext&pageName=base&initProps=%7B%22param%22%3A%7B%22name%22%3A%22wyy%22%7D%7D"
        >biz：返回 base</a
    >
</p>
<p>
    <a
        href="qunariphone://react/biz?hybridId=qunar_react_native_ext&pageName=pageA&initProps=%7B%22param%22%3A%7B%22name%22%3A%22wyy%22%7D%7D"
        >biz：返回 pageA</a
    >
</p>

具体可以参考 QRN 配套测试 HY Demo

RN -> HY

通过调用 Ext.Router.Bridge.sendScheme 方法，举例：

let url =
    'qunariphone://hy?url=http%3A%2F%2Fwyy.qunar.com%2Fqreact-test-hy%2Findex.html&loadview=auto';
Ext.Router.Bridge.sendScheme({
    url
});

桥

广播