H5跳转ReactNative打开指定页面

一、需求

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

二、 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：一般表示跳转地址的端口名称

三、具体使用配置

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

四、注意事项

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

<activity
  android:name=".MainActivity"
  android:launchMode="singleTask">
复制代码