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配置


            
                
                
                
                
                
                
                
                
            
        

IOS配置

只需要配置info.plist 文件,只需要配置URL Schemes就可以了,identifier是可选配置
1040068-20181130105211704-1793990249.png

4、注意事项

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


你可能感兴趣的:(ReactNative)