React Native被杀后台时iOS Widget深度链接失效问题

你的问题出在iOS应用冷启动时的深度链接事件捕获时机上：

当应用被完全杀死后从Widget启动（冷启动），iOS系统会先初始化应用，再传递深度链接的URL。但你的Home组件是在应用启动完成后才挂载的，此时你在componentDidMount里注册的url事件监听已经错过了系统发送的初始URL事件，所以handleOpenURL不会被触发，自然无法导航到目标页面。

而Android的Linking.getInitialURL()可以直接获取冷启动时的初始URL，所以你的代码在Android上能正常工作；iOS后台唤醒时，应用已经处于活跃状态，url事件监听已经注册，所以也能正常捕获跳转。

另外你写的临时方案逻辑上是有问题的：Linking.getInitialURL()是异步Promise，getRoute函数是同步执行的，所以在return的时候route还没被赋值（Promise还未resolve），这个方案其实不会真正生效，可能只是测试时的巧合让你误以为有用。

推荐使用react-navigation官方提供的Deep Linking功能，它已经封装了冷启动、后台唤醒等所有场景的处理逻辑，不需要手动监听事件或解析URL，更优雅可靠。

步骤1：配置react-navigation的链接规则 #

修改你的App.js，添加linking配置：

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import Home from './screens/Home';
import Form from './screens/Form';

// 定义深度链接的前缀和路由映射
const linking = {
  prefixes: ['playgroundapp://'], // 你的Widget跳转使用的URL前缀
  config: {
    screens: {
      Home: '',          // 根路径 playgroundapp:// 对应Home页面
      Form: 'form',      // playgroundapp://form 对应Form页面
    },
  },
};

const AppNavigator = createStackNavigator(
  {
    Home: { screen: Home },
    Form: { screen: Form },
  },
  {
    initialRouteName: 'Home', // 默认初始路由，react-navigation会根据链接自动覆盖
  }
);

// 将linking配置绑定到导航器
AppNavigator.navigationOptions = {
  linking,
};

export default createAppContainer(AppNavigator);

步骤2：简化Home组件代码 #

因为react-navigation会自动处理所有深度链接跳转逻辑，你可以移除Home组件里手动的Linking监听和处理代码：

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';

export default class Home extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.h1}>Playground</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  h1: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});

为什么这个方案有效？ #

react-navigation的linking配置会在应用启动的早期阶段就捕获初始URL（包括冷启动场景），并自动根据你定义的路由映射跳转到对应的页面，同时也会处理后台唤醒时的URL事件，完全覆盖了你的需求场景。

手动处理的替代方案（不推荐） #

如果你不想用官方配置，也可以在应用的根组件里处理所有场景的URL：

import React, { useEffect } from 'react';
import { Linking } from 'react-native';
import AppContainer from './AppNavigator';

export default function App() {
  useEffect(() => {
    // 处理冷启动的初始URL
    const handleInitialURL = async () => {
      const url = await Linking.getInitialURL();
      if (url) {
        navigateToRoute(url);
      }
    };

    // 处理后台唤醒的URL事件
    const handleOpenURL = (event) => {
      navigateToRoute(event.url);
    };

    // 解析URL并导航
    const navigateToRoute = (url) => {
      const route = url.replace(/.*?:\/\//g, '');
      if (route === 'form') {
        AppContainer._navigation.navigate('Form');
      }
    };

    handleInitialURL();
    Linking.addEventListener('url', handleOpenURL);

    return () => {
      Linking.removeEventListener('url', handleOpenURL);
    };
  }, []);

  return <AppContainer />;
}

这种方法需要手动维护URL解析和导航逻辑，不如官方方案简洁，所以更推荐使用react-navigation的内置Deep Linking功能。

内容的提问来源于stack exchange，提问作者jana.m