如何捕获App启动原始URL并在默认路由前跳转至指定页面？

完全可以实现捕获App启动URL，并在默认导航行为执行前跳转到GameScreen页面。以下是具体的实现步骤和代码示例：

1. 捕获启动URL（冷/热启动） #

使用React Native内置的Linking API，既能获取冷启动时的初始URL，也能监听热启动时的URL唤起事件：

• 冷启动：通过Linking.getInitialURL()异步获取App启动时的URL
• 热启动：通过Linking.addEventListener('url', callback)监听后续的URL唤起事件

2. 动态控制初始导航路由 #

不要固定initialRouteName，而是根据捕获到的URL动态决定初始页面，有两种常用方式：

方式一：动态设置initialRouteName #

在App组件初始化时解析URL，修改初始路由：

import { useState, useEffect } from 'react';
import { Linking } from 'react-native';
import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeTabPages from './HomeTabPages';
import GameScreen from './GameScreen';

const Stack = createStackNavigator();

export default function App() {
  const [initialRoute, setInitialRoute] = useState('HomeTabPages');
  const navigationRef = useNavigationContainerRef();

  useEffect(() => {
    // 处理冷启动URL
    const handleInitialUrl = async () => {
      const url = await Linking.getInitialURL();
      if (url?.startsWith('myapp://game')) {
        const params = new URLSearchParams(url.split('?')[1]);
        const gameId = params.get('id');
        if (gameId) {
          setInitialRoute('GameScreen');
        }
      }
    };

    handleInitialUrl();

    // 处理热启动URL跳转
    const handleDeepLink = ({ url }) => {
      if (url?.startsWith('myapp://game')) {
        const params = new URLSearchParams(url.split('?')[1]);
        const gameId = params.get('id');
        navigationRef.current?.navigate('GameScreen', { id: gameId });
      }
    };

    const subscription = Linking.addEventListener('url', handleDeepLink);
    return () => subscription.remove();
  }, []);

  return (
    <NavigationContainer ref={navigationRef}>
      <Stack.Navigator
        initialRouteName={initialRoute}
        screenOptions={{ headerShown: false }}
      >
        <Stack.Screen name="HomeTabPages" component={HomeTabPages} />
        <Stack.Screen name="GameScreen" component={GameScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

方式二：直接设置导航初始状态 #

如果需要更精准的栈结构控制，可以通过NavigationContainer的initialState属性直接定义初始导航栈：

import { useState, useEffect } from 'react';
import { Linking } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeTabPages from './HomeTabPages';
import GameScreen from './GameScreen';

const Stack = createStackNavigator();

export default function App() {
  const [initialNavState, setInitialNavState] = useState(null);

  useEffect(() => {
    const setupInitialNav = async () => {
      const url = await Linking.getInitialURL();
      let state;
      if (url?.startsWith('myapp://game')) {
        const params = new URLSearchParams(url.split('?')[1]);
        const gameId = params.get('id');
        // 直接构建进入GameScreen的栈状态
        state = {
          routes: [{ name: 'GameScreen', params: { id: gameId } }]
        };
      } else {
        // 默认进入HomeTabPages
        state = {
          routes: [{ name: 'HomeTabPages' }]
        };
      }
      setInitialNavState(state);
    };

    setupInitialNav();
  }, []);

  return (
    <NavigationContainer initialState={initialNavState}>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name="HomeTabPages" component={HomeTabPages} />
        <Stack.Screen name="GameScreen" component={GameScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

3. 关键注意事项 #

• 必须在iOS的Info.plist和Android的AndroidManifest.xml中正确配置myapp这个URL Scheme，否则无法捕获到唤起链接。
• 解析URL时要增加异常处理，比如URL格式错误、参数缺失的情况，避免出现崩溃。
• 热启动时的跳转需要通过导航ref获取导航实例，或者在已挂载的屏幕组件中处理。

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