第三方app唤醒react-native项目

最新推荐文章于 2024-09-23 16:26:31 发布

原创最新推荐文章于 2024-09-23 16:26:31 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react-native #rn #rn项目唤醒

react native 专栏收录该内容

3 篇文章

订阅专栏

本文主要介绍RN项目唤醒的相关配置。包括安卓在AndroidManifest.xml文件添加协议配置，iOS在AppDelegate.m添加代码及打包时在info中配置URL Schemes。还说明了在项目中使用Linking方法实现跳转，总结了使用不同方法遇到的问题，并可通过HTML文件调试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、安卓配置

在{项目}/android/app/src/main/AndroidManifest.xml文件下添加：

<intent-filter>

  <action android:name="android.intent.action.VIEW" />

  <category android:name="android.intent.category.DEFAULT" />

  <category android:name="android.intent.category.BROWSABLE" />

  <data android:scheme="URL" />

</intent-filter>

注:

中的URL是与第三方定的协议（URL://）

二、 iOS配置

看文档中需要往AppDelegate.m添加部分代码，但我进项目里面找过，发现只有：

这部分的代码，其余文档中的代码不加也不影响功能。

并且要在打包时在info中配置 URL Schemes:

三、项目中

在componentDidMount中添加Linking的方法：

Linking.getInitialURL().then(url => this.handleOpenURL(url))

Linking.addEventListener('url', (event) => this.handleOpenURL(event.url))

注：第一个方法getInitialURL主要为了杀死APP后重启时跳转，第二个方法addEventListener为了监听在后台运行唤起时的跳转

总结遇到的问题：

如果只用了getInitialURL方法，则只有杀死APP再调起时才起作用。

如果只用addEventListener方法，则APP杀死后的首次调起不会起作用。

最好不要在AppState.addEventListener方法中的active加Linking的方法，遇到的问题是，在运行拉拉队前台时，手机锁屏再打开以后，会调用到linking方法。

可以自行写一个HTML文件进行调试：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
</head>
<a href="javascript:;" id="openApp">打开app</a>
<script type="text/javascript">
    function platform() {
        var u = navigator.userAgent || "", app = navigator.appVersion;
        return {
            trident: u.indexOf('Trident') > -1, //IE内核
            presto: u.indexOf('Presto') > -1, //opera内核
            webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
            iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
            iPad: u.indexOf('iPad') > -1, //是否iPad
            webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
            weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
            qq: u.match(/\sQQ/i) == " qq" //是否QQ
        };
    }
    document.getElementById('openApp').onclick = function(e){
        window.location = "URL://";//app协议
        if (platform().iPhone) {
            window.setTimeout(function () {
                window.location = "bu la bu la";//ios 下载地址
            }, 2000)
        }
        if (platform().android) {
            window.setTimeout(function () {
                window.location = "a ba a ba";//android 下载地址
            }, 2000)
        }
    };
</script>
</html>