React Native实现referral link功能：唤起APP预填referral code或引导下载

完全可行，以下是一套落地的实现方案，核心依赖深层链接（Deeplink） + 参数持久化完成需求：

一、核心逻辑梳理 #

用户点击推荐链接时，先尝试唤起已安装的App并传递referral code；若唤起失败，跳转至应用商店下载，同时将referral code持久化在用户设备中；用户安装打开App后，读取该参数并自动预填到注册表单。

二、深层链接（Deeplink）配置与网页唤起逻辑 #

1. 配置App的深层链接协议 #

Android端

在AndroidManifest.xml的主Activity节点下添加intent-filter，指定自定义scheme和host：

<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="yourapp"
        android:host="referral"
        android:pathPattern="/.*" />
</intent-filter>

配置后，yourapp://referral?code=ABC123这类链接即可唤起App。

iOS端

• 在Info.plist中添加URL Types，设置URL Schemes为yourapp；
• 若需要更稳定的HTTPS链接唤起，可配置Associated Domains，添加applinks:yourdomain.com（需在域名后台配置对应的apple-app-site-association文件）。

2. 网页端处理唤起与跳转 #

在推荐链接对应的网页中，实现“先唤起App，超时跳应用商店”的逻辑，同时持久化referral code：

function handleReferral() {
    const referralCode = new URLSearchParams(window.location.search).get('code');
    if (!referralCode) return;

    // 存储referral code到本地，供App后续读取
    localStorage.setItem('referral_code', referralCode);
    document.cookie = `referral_code=${referralCode}; path=/; domain=yourdomain.com`;

    // 尝试唤起App
    const appLink = `yourapp://referral?code=${referralCode}`;
    const timeout = setTimeout(() => {
        // 唤起失败，跳转应用商店
        const storeUrl = /iPhone|iPad|iPod/.test(navigator.userAgent) 
            ? 'https://apps.apple.com/cn/app/your-app-id' 
            : 'https://play.google.com/store/apps/details?id=your.package.name';
        window.location.href = storeUrl;
    }, 1000);

    // 监听页面状态，判断是否唤起成功
    document.addEventListener('visibilitychange', () => {
        if (document.hidden) clearTimeout(timeout);
    });

    window.location.href = appLink;
}

// 页面加载时执行
handleReferral();

三、React Native端参数处理与预填逻辑 #

1. 读取唤起时的深层链接参数 #

使用React Native官方Linking API监听App启动/前台唤起时的链接，提取并存储referral code：

import { Linking, AsyncStorage } from 'react-native';
import { useNavigation } from '@react-navigation/native';

function App() {
    const navigation = useNavigation();

    useEffect(() => {
        // 读取App启动时的初始链接
        const getInitialLink = async () => {
            const url = await Linking.getInitialURL();
            if (url) processReferralCode(url);
        };

        // 监听App前台时的链接唤起
        const linkSubscription = Linking.addEventListener('url', (event) => {
            processReferralCode(event.url);
        });

        getInitialLink();
        return () => linkSubscription.remove();
    }, [navigation]);

    // 解析并存储referral code，跳转注册页
    const processReferralCode = async (url) => {
        const code = new URLSearchParams(new URL(url).search).get('code');
        if (code) {
            await AsyncStorage.setItem('referral_code', code);
            navigation.navigate('Register');
        }
    };

    return /* App组件内容 */;
}

2. 读取网页持久化的参数（安装后首次打开） #

如果用户是从应用商店下载打开App，通过WebView加载域名下的空白页面，读取网页存储的referral code：

import { WebView, AsyncStorage } from 'react-native';
import { useRef, useEffect, useState } from 'react';

function ReferralChecker() {
    const webViewRef = useRef(null);
    const [hasChecked, setHasChecked] = useState(false);

    useEffect(() => {
        const checkStoredCode = async () => {
            const existingCode = await AsyncStorage.getItem('referral_code');
            if (!existingCode && !hasChecked) {
                // 注入JS读取网页存储的参数
                webViewRef.current?.injectJavaScript(`
                    const code = localStorage.getItem('referral_code') || 
                        (document.cookie.split('; ').find(row => row.startsWith('referral_code='))?.split('=')[1] || '');
                    window.ReactNativeWebView.postMessage(code);
                `);
            }
        };
        checkStoredCode();
    }, [hasChecked]);

    // 接收WebView传递的参数
    const handleMessage = async (event) => {
        const code = event.nativeEvent.data;
        if (code) {
            await AsyncStorage.setItem('referral_code', code);
            setHasChecked(true);
        }
    };

    return hasChecked ? null : (
        <WebView
            ref={webViewRef}
            source={{ uri: 'https://yourdomain.com/referral-check' }}
            onMessage={handleMessage}
            style={{ height: 0, width: 0 }}
        />
    );
}

3. 注册页预填逻辑 #

在注册表单组件中，读取存储的referral code并设置为输入框默认值：

import { useState, useEffect } from 'react';
import { TextInput, AsyncStorage } from 'react-native';

function RegisterScreen() {
    const [form, setForm] = useState({
        email: '',
        password: '',
        referralCode: ''
    });

    useEffect(() => {
        const loadReferralCode = async () => {
            const code = await AsyncStorage.getItem('referral_code');
            if (code) {
                setForm(prev => ({ ...prev, referralCode: code }));
            }
        };
        loadReferralCode();
    }, []);

    return (
        <TextInput
            value={form.referralCode}
            onChangeText={(text) => setForm(prev => ({ ...prev, referralCode: text }))}
            placeholder="请输入推荐码"
            editable={false} // 可选：设置为不可编辑，仅展示
        />
    );
}

四、备选简化方案 #

若不想手动处理唤起和持久化逻辑，可使用Firebase Dynamic Links、Branch.io这类第三方归因工具，它们会封装好唤起、跳转、参数传递的全流程，只需集成对应React Native SDK即可快速获取referral code。

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