React Native深度链接在目标页面已打开时无法更新参数

嘿，我看你遇到的问题是当用户已经在MapScreen页面时，新的深度链接参数没法更新页面内容对吧？我之前在React Navigation里处理深度链接时也碰过几乎一模一样的情况，咱们一步步来把它解决掉。

问题根源分析 #

现在你的代码里有两个核心问题：

1. MapScreen只在组件挂载时处理一次参数：你用了useEffect(() => { handleLinking() }, [])，空依赖数组意味着这个逻辑只会在组件第一次渲染时执行一次。当用户已经在Map页面触发新深度链接时，组件不会重新挂载，所以新参数完全没被捕获到。
2. 忽略了导航参数的变化：React Navigation在目标页面已经处于栈顶时，会更新该页面的route.params，但你的代码没有监听这个变化。

解决方案 #

1. 监听参数变化 + 页面焦点事件

替换掉原来的useEffect，改用useFocusEffect（React Navigation提供的专门监听页面焦点的Hook），同时把route.params加入依赖，确保每次参数更新或页面获得焦点时都重新处理链接：

修改MapScreen.ts：

import { useFocusEffect } from '@react-navigation/native';
import React from 'react';

// 替换原来的useEffect和handleLinking函数
useFocusEffect(
  React.useCallback(async () => {
    const lat = route.params?.lat;
    const lng = route.params?.lng;
    // 确保参数存在再执行导航逻辑
    if (lat && lng) {
      navigateToCoords(lat, lng);
    }
  }, [route.params]) // 依赖route.params，参数变化就触发
);

这样不管是第一次进入页面，还是已经在页面时触发新深度链接，甚至是从后台切回App，只要route.params更新或者页面重新获得焦点，都会重新处理最新的坐标参数。

2. 修复深度链接配置的语法错误

我注意到你的DeeplinkUtils.ts里有个小语法错误：initialRouteName: 'Home, 少了闭合引号，这会导致配置解析异常，先把它修正：

export const linking: DeepLinkingOptions = {
  prefixes: [
    "myapp://",
  ],
  config: {
    initialRouteName: 'Home', // 补上闭合引号
    screens: {
      // ... 其他配置保持不变
    },
  },
};

另外，你可以优化一下parse函数，把字符串参数直接转成数字（坐标本来就是数字类型）：

parse: {
  lng: (lng: string) => parseFloat(lng) || undefined,
  lat: (lat: string) => parseFloat(lat) || undefined,
},

3. 验证导航状态变化（可选调试）

如果还是有问题，可以在NavigationContainer里加一个状态变化的日志，看看深度链接触发时route.params有没有更新：

<NavigationContainer 
  ref={navigationRef} 
  linking={linking}
  onStateChange={(state) => console.log('导航状态更新:', state.routes[state.index].params)}
>
  <RootStackNavigator />
</NavigationContainer>

打开控制台，触发新深度链接时，就能看到参数有没有正确更新到当前页面的params里。

4. 测试深度链接的小技巧

测试时可以用真机/模拟器的命令行直接触发，避免手动操作的误差：

# Android
adb shell am start -W -a android.intent.action.VIEW -d "myapp://map?lat=37.7749&lng=-122.4194" com.yourapp.package

# iOS
xcrun simctl openurl booted "myapp://map?lat=37.7749&lng=-122.4194"

内容来源于stack exchange