React Native Navigation深度链接忽略Linking配置不生效

你的深度链接配置失效是两个核心问题导致的：

• 嵌套导航的父级屏幕未配置空路径，路径匹配规则不符合预期
  React Navigation默认会把每一层嵌套导航的屏幕名作为路径段拼接进匹配规则，你当前没有给根栈下的Authenticated屏幕、以及Authenticated承载的BottomTab对应父屏幕配置路径，最终JoinFromLinkScreen实际匹配的路径是/Authenticated/[默认Tab名]/invite/:inviteCode，完全匹配不到你预期的/invite/:inviteCode根路径。
• 条件渲染卸载了目标屏幕所在的导航分支
  你在RootNavigator中通过some_conditions判断是否渲染Authenticated导航树，React Navigation的链接解析模块只能找到当前已挂载的屏幕，点击深度链接时如果目标屏幕所在的分支没被挂载（比如未登录状态），会直接匹配失败跳转到NotFound页面，不会自动帮你切换分支状态。

1. 修正链接配置 #

给所有不需要出现在链接路径中的父级导航屏幕配置path: ''，同时补全初始路由配置避免匹配歧义，修改后的LinkingConfiguration.js参考：

import * as Linking from 'expo-linking';

const prefix = Linking.createURL('/'); 

export default {
    prefixes: [
        prefix,
        // 补全生产环境自定义scheme做兜底，避免createURL在特殊构建场景下生成前缀异常
        'myapp://', // 替换成你在app.json里配置的自定义scheme
        // Expo Go环境兜底前缀，适配老版本expo-linking生成的带--/的路径
        `${prefix}--/`
    ],
    config: {
        // 配置根栈初始路由，减少匹配歧义
        initialRouteName: 'Unauthenticated',
        screens: {
            Authenticated: {
                // 配置空路径，取消该层屏幕名对路径的占用
                path: '',
                // 替换成你BottomTabNavigator配置的默认Tab屏幕name
                initialRouteName: 'HomeTab',
                screens: {
                    // 如果JoinFromLinkScreen不在默认Tab的导航栈内，需要给它所属的Tab屏幕也配置path: ''
                    // 示例：
                    // MineTab: {
                    //   path: '',
                    //   screens: {
                    //     JoinFromLinkScreen: {
                    //         path: "invite/:inviteCode",
                    //         parse: {
                    //             inviteCode: (inviteCode) => String(inviteCode),
                    //         },
                    //     }
                    //   }
                    // }
                    // 如果JoinFromLinkScreen在默认Tab的导航栈内，直接写配置即可
                    JoinFromLinkScreen: {
                        path: "invite/:inviteCode",
                        parse: {
                            inviteCode: (inviteCode) => String(inviteCode),
                        },
                    }
                },
            },
            Unauthenticated: {
               path: '',
               screens: {
                 // 未登录模块的路由配置保持原有逻辑即可
               }
            },
            NotFound: "*",
        },
    },
};

2. 调整根导航渲染逻辑 #

不要通过条件渲染直接卸载Authenticated/Unauthenticated任意一个导航分支，要保证所有屏幕在导航树中都已注册，权限控制通过导航守卫实现即可，修改后的RootNavigator参考：

const Stack = createStackNavigator();
const RootNavigator = () => {
    return (
        <Stack.Navigator screenOptions={{ headerShown: false }}>
            {/* 两个导航分支全量挂载，不要加条件判断卸载 */}
            <Stack.Screen name="Unauthenticated" component={UnauthenticatedNavigator} />
            <Stack.Screen name="Authenticated" component={AuthenticatedNavigator} />
        </Stack.Navigator>
    );
}

如果需要做登录拦截，可以在导航容器层监听linking的解析事件，解析到目标是JoinFromLinkScreen时先校验登录态，未登录就先跳登录页、存好邀请码参数，登录完成后再携带参数跳转到目标页即可。

本地验证方法 #

配置完成后可以直接用uri-scheme命令行工具调起测试，不需要手动输入链接：

• 安卓测试：npx uri-scheme open myapp://invite/testcode123 --android
• iOS测试：npx uri-scheme open myapp://invite/testcode123 --ios

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