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是可选配置

1040068-20181130105211704-1793990249.png

4、注意事项

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

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