React Native WebView深度链接异常：无法加载分享的指定页面

核心问题定位 #

问题本质是深度链接触发应用启动时，没有正确提取并传递目标URL到WebView。WebView的onNavigationStateChange等导航回调仅在WebView内部跳转时触发，无法捕获应用启动参数中的外部链接。

具体解决步骤 #

1. 在Android端提取深度链接URL #

打开android/app/src/main/java/[你的包名]/MainActivity.java，重写onCreate和onNewIntent方法，从Intent中获取链接并传递给RN层：

import android.content.Intent;
import android.os.Bundle;
import com.facebook.react.ReactActivity;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.bridge.Arguments;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.modules.core.DeviceEventManagerModule;

public class MainActivity extends ReactActivity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    handleDeepLink(getIntent());
  }

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

  private void handleDeepLink(Intent intent) {
    String url = intent.getDataString();
    if (url != null && !url.isEmpty()) {
      sendDeepLinkToRN(url);
    }
  }

  private void sendDeepLinkToRN(String url) {
    ReactInstanceManager manager = getReactNativeHost().getReactInstanceManager();
    if (manager.getCurrentReactContext() != null) {
      WritableMap params = Arguments.createMap();
      params.putString("deepLinkUrl", url);
      manager.getCurrentReactContext()
        .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
        .emit("deepLinkReceived", params);
    }
  }
}

2. 在RN组件中接收URL并更新WebView #

在WebView所在组件中，监听Native发送的事件，动态修改WebView的source：

import React, { useState, useEffect } from 'react';
import { WebView, NativeEventEmitter, NativeModules } from 'react-native';

const AppWebView = () => {
  const [webUrl, setWebUrl] = useState('https://example.com'); // 默认首页

  useEffect(() => {
    const emitter = new NativeEventEmitter(NativeModules.DeviceEventManagerModule);
    const listener = emitter.addListener(
      'deepLinkReceived',
      (data) => {
        // 校验URL归属，防止恶意跳转
        if (data.deepLinkUrl.startsWith('https://example.com')) {
          setWebUrl(data.deepLinkUrl);
        }
      }
    );

    return () => listener.remove();
  }, []);

  return (
    <WebView
      source={{ uri: webUrl }}
      // 其他WebView配置项
    />
  );
};

export default AppWebView;

3. 确认深度链接配置正确性 #

检查AndroidManifest.xml中的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="https"
    android:host="example.com" />
</intent-filter>

常见注意事项 #

• 不要依赖WebView的导航回调获取启动时的外部链接，这些回调仅处理WebView内部页面跳转。
• 必须校验接收的URL属于自有站点，避免安全风险。
• 测试建议用真实设备，部分模拟器对第三方应用（如Slack）的深度链接处理存在差异。

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