React Native中基于react-native-router-flux的Android深度链接实现问题

我之前在react-native-router-flux v4.0.6 + RN 0.55.4的组合里踩过深度链接的坑，给你梳理几个关键的排查和修复步骤，应该能解决Android端浏览器不唤起应用的问题：

这是Android端深度链接生效的基础，很多问题都出在这里：

• 打开android/app/src/main/AndroidManifest.xml，找到你的主Activity（通常是MainActivity），添加正确的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" />
    <!-- 替换成你的自定义scheme，比如`myapp` -->
    <data android:scheme="myapp" />
    <!-- 如果需要指定host（比如`myapp://home`），添加这一行 -->
    <data android:host="home" />
</intent-filter>

⚠️ 注意：所有<data>标签要放在同一个intent-filter内，Android会把它们视为AND条件；分开写的话会变成OR，可能导致匹配混乱。

• 如果你自定义了MainActivity（继承自ReactActivity），确保没有覆盖onNewIntent方法，或者覆盖后正确传递事件：

@Override
public void onNewIntent(Intent intent) {
    super.onNewIntent(intent);
    getReactInstanceManager().onNewIntent(intent);
}

这个方法是把系统的深度链接Intent传递给RN JS层的关键，漏掉的话RNRF根本收不到链接事件。

v4版本的RNRF需要在Router组件里绑定链接处理方法，同时给目标页面的Scene配置匹配规则：

import { Router, Scene, Actions } from 'react-native-router-flux';

const AppRouter = () => {
  // 统一处理初始启动和后续的深度链接
  const handleDeepLink = (payload) => {
    const { path } = payload;
    // 根据链接路径跳转对应页面，比如`myapp://home`对应path为`/home`
    switch(path) {
      case '/home':
        Actions.home();
        break;
      case '/detail':
        Actions.detail({ id: payload.query.id }); // 还可以处理参数
        break;
      default:
        Actions.home(); // 兜底跳转首页
    }
  };

  return (
    <Router
      onLaunch={(payload) => handleDeepLink(payload)} // 应用启动时的链接
      onDeepLink={(payload) => handleDeepLink(payload)} // 应用后台时的链接
    >
      <Scene key="root">
        <Scene 
          key="home" 
          component={Home} 
          title="首页" 
          scheme="myapp" // 和AndroidManifest的scheme保持一致
          path="/home" // 匹配的路径
        />
        <Scene 
          key="detail" 
          component={Detail} 
          title="详情页" 
          scheme="myapp" 
          path="/detail/:id" // 带参数的路径规则
        />
      </Scene>
    </Router>
  );
};

直接在浏览器地址栏输入链接可能无法唤起应用（不同浏览器的处理逻辑不一样），推荐用以下方式测试：

1. adb命令测试（最可靠）：

adb shell am start -W -a android.intent.action.VIEW -d "myapp://home" com.your.package.name

把com.your.package.name换成你的应用包名，这条命令能直接触发系统的链接唤起逻辑，快速验证配置是否生效。
2. Chrome浏览器测试：
在Chrome地址栏输入以下格式的链接：

intent://home#Intent;scheme=myapp;package=com.your.package.name;end

Chrome能正确识别这种格式并唤起应用。

RN 0.55.4的Linking模块偶尔会出现事件传递延迟，你可以在根组件里手动监听作为补充：

import { Linking } from 'react-native';

class App extends Component {
  componentDidMount() {
    // 处理应用启动时的初始链接
    Linking.getInitialURL().then(url => {
      if (url) {
        this.handleManualDeepLink(url);
      }
    });

    // 处理应用后台时的链接
    Linking.addEventListener('url', (event) => {
      this.handleManualDeepLink(event.url);
    });
  }

  handleManualDeepLink = (url) => {
    // 解析链接并跳转，比如从`myapp://detail?id=123`中提取路径和参数
    const [pathPart, queryPart] = url.replace('myapp://', '').split('?');
    if (pathPart === 'detail' && queryPart) {
      const id = new URLSearchParams(queryPart).get('id');
      Actions.detail({ id });
    } else {
      Actions.home();
    }
  }

  render() {
    return <AppRouter />;
  }
}

按照这些步骤排查，应该能解决Android端无法唤起应用的问题。

内容的提问来源于stack exchange，提问作者christo-pher18