Expo应用适配useLinkProps时如何通过屏幕名获取跳转路径

React Navigation v6 内置的路由解析引擎本来就支持「根据屏幕名生成匹配当前上下文的路径」，useLinkProps 从设计之初就复用了这套逻辑，不需要自己写路径计算工具，只需要对齐参数格式和配置规则即可。

第一步：统一维护屏幕与路径的映射关系 #

所有路径计算的基础是你在创建导航器时定义的路由结构，不要把「Web端的linking路径配置」和「移动端的导航器屏幕注册」拆成两套独立逻辑：

• 在各个嵌套导航器中正常注册屏幕，比如：

  // 消息页嵌套栈
  const MessageStack = createNativeStackNavigator()
  function MessageStackScreen() {
    return (
      <MessageStack.Navigator>
        <MessageStack.Screen name="MessageHome" component={MessageHome} />
        <MessageStack.Screen name="AddMessageScreen" component={AddMessage} />
      </MessageStack.Navigator>
    )
  }
  
  // 用户详情嵌套栈
  const ProfileStack = createNativeStackNavigator()
  function ProfileStackScreen() {
    return (
      <ProfileStack.Navigator>
        <ProfileStack.Screen name="UserProfile" component={UserProfile} />
        <ProfileStack.Screen name="AddMessageScreen" component={AddMessage} />
      </ProfileStack.Navigator>
    )
  }
  

• 配套的linking配置只需要写和导航器结构对应的路径前缀，不需要重复定义每个屏幕的完整路径：

  const linking = {
    prefixes: ['https://yourdomain.com', 'yourapp://'],
    config: {
      screens: {
        // 消息栈对应路径前缀
        MessageStack: {
          path: '/message',
          screens: {
            // 子屏幕只需要写相对路径
            AddMessageScreen: 'add'
          }
        },
        // 用户栈对应带动态参数的路径前缀
        ProfileStack: {
          path: '/profile/:userId',
          screens: {
            AddMessageScreen: 'message/add'
          }
        }
      }
    }
  }
  

  这套配置同时服务于两个场景：移动端navigate的屏幕定位、Web端的路径生成，不会出现两套逻辑不一致的问题。

第二步：给useLinkProps传路由目标而非硬编码URL #

很多人对useLinkProps的参数存在误解，以为它只能传固定的字符串URL——实际上在v6版本中，它支持传入和navigation.navigate格式完全一致的路由目标对象，内部会自动复用和SPA跳转完全相同的路径解析规则：

import { useLinkProps } from '@react-navigation/native'

function AddMessageButton() {
  // 完全按照navigate的参数格式写，不要传硬编码路径
  const linkProps = useLinkProps({
    to: {
      screen: 'AddMessageScreen',
      params: { /* 要传递的参数，比如关联的用户ID等 */ }
    }
  })

  // 把生成的属性直接绑到a标签上，支持用户右键新标签页打开
  return <a {...linkProps}>新建消息</a>
}

匹配规则与交互效果完全符合预期 #

因为路径计算逻辑和navigation.navigate用的是同一套引擎，生成href时会自动适配当前路由的上下文：

• 当你当前处于/message路径下（消息栈激活），生成的href为/message/add
• 当你当前处于/profile/598路径下（用户栈激活），生成的href为/profile/598/message/add
  系统会优先匹配当前激活嵌套栈里的同名屏幕，而不是跨栈找根级路由，完全避免硬编码绝对路径带来的路由错位问题。
  这套生成的a标签属性，左键点击时依然会触发React Navigation的SPA路由切换，和原来按钮的交互体验完全一致，不会出现整页刷新的问题；只有用户主动通过右键、中键打开链接时，才会使用计算好的真实href加载页面，满足用户自主选择打开方式的需求。

常见避坑点 #

• 确保React Navigation核心包版本在v6及以上，v5版本的useLinkProps不支持传入路由对象，只能传字符串URL，无法实现上下文自适应的路径计算
• 不要把linking配置和导航器的屏幕注册拆成两套独立维护的映射，否则会出现路径和屏幕名不对应的问题
• 可以对useLinkProps做一层简单封装，比如写统一的NavLink组件，接收和navigate一致的参数格式，减少重复代码。

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