React Native Android实现浏览器URL唤起APP并跳转对应页面求助

一、修正Intent Filter配置 #

你当前的Intent Filter存在匹配优先级问题：pathPrefix="/"会拦截所有该域名的请求，导致/detail开头的URL无法触发对应规则。调整为更精准的匹配逻辑，将具体规则放在前面确保优先级正确：

<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />

    <!-- 匹配/detail开头的URL（优先级更高） -->
    <data
        android:host="www.domain.com"
        android:pathPrefix="/detail"
        android:scheme="https" />

    <!-- 精确匹配/page.html路径 -->
    <data
        android:host="www.domain.com"
        android:path="/page.html"
        android:scheme="https" />
</intent-filter>

二、Android原生层传递URL到React Native #

在MainActivity中处理浏览器唤起的Intent，提取URL并发送给RN层：

import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import com.facebook.react.ReactActivity;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.modules.core.DeviceEventManagerModule;

public class MainActivity extends ReactActivity {
    @Override
    protected String getMainComponentName() {
        return "YourAppName"; // 替换为你的RN项目名称
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        handleIntent(getIntent());
    }

    @Override
    protected void onNewIntent(Intent intent) {
        super.onNewIntent(intent);
        setIntent(intent);
        handleIntent(intent);
    }

    private void handleIntent(Intent intent) {
        Uri data = intent.getData();
        if (data != null) {
            sendUrlToRN(data.toString());
        }
    }

    private void sendUrlToRN(String url) {
        ReactInstanceManager manager = getReactInstanceManager();
        ReactContext context = manager.getCurrentReactContext();
        if (context != null) {
            context.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                    .emit("urlReceived", url);
        }
    }
}

三、React Native层处理URL跳转 #

在RN根组件中监听原生传递的URL事件，解析后跳转至对应页面（示例基于React Navigation）：

import React, { useEffect } from 'react';
import { DeviceEventEmitter, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();
let navigation;

// 目标页面组件
const PageScreen = () => (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Page.html 对应页面</Text>
    </View>
);

const DetailScreen = ({ route }) => (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>详情页面：{route.params?.name || '无参数'}</Text>
    </View>
);

const App = () => {
    useEffect(() => {
        const subscription = DeviceEventEmitter.addListener('urlReceived', handleUrl);
        return () => subscription.remove();
    }, []);

    const handleUrl = (url) => {
        const urlObj = new URL(url);
        if (urlObj.pathname === '/page.html') {
            navigation.navigate('Page');
        } else if (urlObj.pathname.startsWith('/detail/')) {
            const name = urlObj.pathname.split('/')[2];
            navigation.navigate('Detail', { name });
        }
    };

    return (
        <NavigationContainer ref={ref => navigation = ref}>
            <Stack.Navigator initialRouteName="Home">
                <Stack.Screen name="Home" component={() => <Text>首页</Text>} />
                <Stack.Screen name="Page" component={PageScreen} />
                <Stack.Screen name="Detail" component={DetailScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    );
};

export default App;

四、测试方法 #

使用adb命令模拟浏览器唤起请求，验证跳转逻辑：

# 测试/page.html唤起
adb shell am start -a android.intent.action.VIEW -d "https://www.domain.com/page.html" com.your.app.package

# 测试/detail/xxx唤起
adb shell am start -a android.intent.action.VIEW -d "https://www.domain.com/detail/testName" com.your.app.package

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