React Native Deep Linking场景下如何读取链接并提取参数

核心逻辑 #

所有端的处理流程统一为两步：

• 捕获触发App启动/页面跳转的完整Deep Link URI
• 按参数携带的位置（路径段/Query参数段）拆分URI，提取对应参数值
  针对你给出的示例链接myapp://somepage/code=123，参数直接写在路径段中，也可以按业务需求调整为标准Query格式myapp://somepage?code=123，两种形式的解析方案如下。

各端具体实现代码 #

Android 端 #

在配置了Deep Link跳转规则的Activity中，分别处理冷启动和后台唤起场景：

import android.net.Uri
import android.content.Intent
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity

class TargetActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // 处理冷启动场景下的Deep Link
        intent?.data?.let { parseDeepLink(it) }
    }

    override fun onNewIntent(intent: Intent?) {
        super.onNewIntent(intent)
        // 处理后台驻留场景下的Deep Link
        intent?.data?.let { parseDeepLink(it) }
    }

    private fun parseDeepLink(uri: Uri) {
        // 1. 适配标准Query格式：myapp://somepage?code=123
        val codeFromQuery = uri.getQueryParameter("code")

        // 2. 适配路径段格式：myapp://somepage/code=123
        var codeFromPath: String? = null
        uri.pathSegments.forEach { segment ->
            if (segment.startsWith("code=")) {
                codeFromPath = segment.split("=").lastOrNull()
            }
        }
        
        // 此处使用拿到的code值做后续业务处理
        val finalCode = codeFromQuery ?: codeFromPath
    }
}

iOS 端 #

在SceneDelegate（iOS 13+）或AppDelegate的Deep Link回调中处理：

import UIKit

class SceneDelegate: UIResponder, UIWindowSceneDelegate {
    var window: UIWindow?

    func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) {
        guard let deepLinkUrl = URLContexts.first?.url else { return }
        parseDeepLink(url: deepLinkUrl)
    }

    private func parseDeepLink(url: URL) {
        // 1. 适配标准Query格式：myapp://somepage?code=123
        var codeFromQuery: String?
        if let urlComponents = URLComponents(url: url, resolvingAgainstBaseURL: false),
           let codeItem = urlComponents.queryItems?.first(where: { $0.name == "code" }) {
            codeFromQuery = codeItem.value
        }

        // 2. 适配路径段格式：myapp://somepage/code=123
        var codeFromPath: String?
        url.pathComponents.forEach { segment in
            if segment.starts(with: "code=") {
                codeFromPath = String(segment.split(separator: "=").last ?? "")
            }
        }
        
        // 此处使用拿到的code值做后续业务处理
        let finalCode = codeFromQuery ?? codeFromPath
    }
}

// iOS 13以下版本在AppDelegate中实现对应回调即可

React Native 跨端框架 #

使用官方Linking模块处理：

import { useEffect } from 'react';
import { Linking } from 'react-native';

const TargetPage = () => {
    useEffect(() => {
        // 处理冷启动场景
        Linking.getInitialURL().then(url => {
            url && parseDeepLink(url)
        })

        // 处理后台唤起场景
        const linkListener = Linking.addListener('url', event => {
            parseDeepLink(event.url)
        })

        return () => linkListener.remove()
    }, [])

    const parseDeepLink = (url) => {
        const urlObj = new URL(url)
        // 1. 适配标准Query格式：myapp://somepage?code=123
        const codeFromQuery = urlObj.searchParams.get('code')

        // 2. 适配路径段格式：myapp://somepage/code=123
        let codeFromPath = null
        urlObj.pathname.split('/').forEach(segment => {
            if (segment.startsWith('code=')) {
                codeFromPath = segment.split('=')[1]
            }
        })

        // 此处使用拿到的code值做后续业务处理
        const finalCode = codeFromQuery || codeFromPath
    }

    // 页面渲染逻辑
    return <></>
}

注意事项 #

• 必须同时覆盖App冷启动和后台驻留唤起两种场景，避免漏捕获Deep Link
• 参数取值需要做非空校验，避免异常链接格式导致业务逻辑崩溃
• 如果参数包含中文或特殊字符，需要先做URL解码再使用

内容的提问来源于stack exchange，提问作者nodabasi