H5跳转ReactNative打开指定页面

1、需求

工作可能有这样的需求，就是手机浏览器中加载一个 h5 页面，点击可以打开某一个 APP，比如微信等。这时候通常都是采用 URL Scheme 的方式进行配置跳转。
那么什么是 URL Scheme 呢？
简单说：它是一个页面跳转协议。

2、URL Scheme 协议

URL Scheme 是一种页面内跳转协议，是一种非常好的实现机制，通过定义自己的 scheme 协议，可以非常方便跳转 app 中的各个页面；通过 scheme 协议，服务器可以定制化告诉 App 跳转那个页面，可以通过通知栏消息定制化跳转页面，可以通过 H5 页面跳转页面等。

苹果手机中的 APP 都有一个沙盒，APP 就是一个信息孤岛，相互是不可以进行通信的。但是 iOS 的 APP 可以注册自己的 URL Scheme，URL Scheme 是为方便 app 之间互相调用而设计的。

URL Scheme 必须能唯一标识一个 APP，如果你设置的 URL Scheme 与别的 APP 的 URL Scheme 冲突时，你的 APP 不一定会被启动起来。因为当你的 APP 在安装的时候，系统里面已经注册了你的 URL Scheme。
完整的 URL Scheme 格式：

stars://host:8088/pageDetail?pageId=102

1.stars: 表示 Scheme 协议名称, 可以自定义
2.host: 表示协议的跳转地址名称，通常和 APP 中配置的名称是一直的
3.pageDetail: 表示跳转的具体页面名称
4.pageId: 表示传递的参数
5.8088：通常表示跳转地址的端口名称

3、具体使用配置

Android 配置

<activity

         ...

            <!-- 要想在别的 App 上能成功调起 App，必须添加 intent 过滤器 -->
            <intent-filter>
                <!-- 协议部分，随便设置 -->
                <data
                    android:host="host"
                    android:path="/pageDetail"
                    android:port="8088"// 可以不要
                    android:scheme="stars"/>
                <!-- 下面这几行也必须得设置 -->
                <!-- 表示该页面可以被隐式调用，必须加上该项 -->
                <category android:name="android.intent.category.DEFAULT"/>
                <action android:name="android.intent.action.VIEW"/>
                <!-- 如果希望该应用可以通过浏览器的连接启动，则添加该项 -->
                <category android:name="android.intent.category.BROWSABLE"/>
            </intent-filter>
        </activity>

IOS 配置

只需要配置 info.plist 文件，只需要配置 URL Schemes 就可以了，identifier 是可选配置

4、注意事项

正常情况下，以上配置后，就可以正常进行跳转了，但是在安卓上，还需要进行一步配置, 如果你的应用被其注册过的外部 url 调起，如果要在现有的 MainActivity 中监听传入的 intent，那么需要在 AndroidManifest.xml 中将 MainActivity 的 launchMode 设置为 singleTask

<activity
  android:name=".MainActivity"
  android:launchMode="singleTask">