在React Native的App中添加配置以支持能够从H5中唤醒(URL Scheme)

最新推荐文章于 2025-10-27 01:52:16 发布

原创最新推荐文章于 2025-10-27 01:52:16 发布 · 999 阅读

0 ·

CC 4.0 BY-SA版权

React Native 同时被 2 个专栏收录

6 篇文章

订阅专栏

移动端H5

2 篇文章

订阅专栏

本文介绍了如何在Android原生和React Native应用中配置URL Scheme和Universal Link，以实现H5页面点击后跳转到APP内指定页面。在AndroidManifest.xml中添加相应的intent-filter，并在React Native的App.js中监听和处理唤醒URL，确保应用能正确响应H5的链接点击。

相关博文：H5页面在浏览器中跳转APP的方式/URL Scheme/Universal Link

相关版本：

“react-native”: “0.61.5”

Android原生

在AndroidManifest.xml中添加如下代码，如果已经存在了MainActivity就在里面添加。

<activity
          android:name="com.xxx.MainActivity"
          android:launchMode="singleTask">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
    <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="name" /> // 唤醒的路径，例如name://
    </intent-filter>
</activity>

React Native

在App.js配置未打开App时的第一次唤醒。

Linking.getInitialURL()拿到唤醒的url，如果没有返回空。

import { Linking } from "react-native";
componentDidMount（） {
	Linking.getInitialURL()
            .then(url => {
                if (url) {
                    this.handleDeepLinking({ url }); // 一些需要的操作
                }
            })
}

在需要对唤醒做出响应的页面进行监听，一般在App.js。

componentDidMount() {
    Linking.addEventListener('url', this.handleDeepLinking);
}
componentWillUnmount() {
    Linking.removeEventListener('url');
}