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是可选配置
H5跳转ReactNative打开指定页面

4、注意事项

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

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

相关推荐