使用选项卡堆栈时反应导航深度链接不起作用

Posted 2023-02-16

【中文标题】使用选项卡堆栈时反应导航深度链接不起作用

【英文标题】：react navigation deep linking not working when use Tabs Stack

【发布时间】：2022-01-11 12:56:59

【问题描述】：

版本：

"dependencies": 
  "react-native": "0.63.4",
  "@react-navigation/bottom-tabs": "^5.11.2",
  "@react-navigation/native": "^5.8.10",
  "@react-navigation/stack": "^5.12.8",

测试网站链接test://info_register?token=1111成功，我可以看到route.params包含token

但是当我进入我的选项卡屏幕并尝试使用test://setting_register?token=1111 时，应用程序只是打开它不会导航到SettingScreen 并且route.params 是未定义的

参考官方文档https://reactnavigation.org/docs/5.x/configuring-links

标签页的深层链接有什么问题？

这是我的代码：

index.js

import * as React from 'react';
import NavigationContainer from '@react-navigation/native';

import LoginStack from './LoginStack';

import Linking from './Linking';

const AppContainer = () => 
  return (
    <NavigationContainer linking=Linking>
      <LoginStack />
    </NavigationContainer>
  );
;

export default AppContainer;

链接.js

const config = 
  screens: 
    // set config for App init screen
    PersonalInfoScreen: 
      path: 'info_register/',
        parse: 
          token: (token) => `$token`,
        ,
    ,
    // set config for Tabs screen
    Setting: 
      screens: 
        SettingScreen: 'setting_register/:token',
      ,
    ,
,
  ,
;

const Linking = 
  prefixes: ['test://'],
  config,
;

export default Linking;

LoginStack.js

import * as React from 'react';
import useSelector from 'react-redux';
import createStackNavigator from '@react-navigation/stack';

import LoginScreen from '../screens/Login/LoginScreen';
import PersonalInfoScreen from '../screens/Login/PersonalInfoScreen';
import TabStack from './TabStack';

const Stack = createStackNavigator();

const LoginStack = () => 
  const uid, userToken = useSelector((state) => state.LoginRedux);

  const showLoginFlow = uid === '' || userToken === '' ? true : false;

  return (
    <Stack.Navigator
      initialRouteName='LoginScreen'
      screenOptions=headerShown: false, gestureEnabled: false>
      showLoginFlow ? (
        <>
          <Stack.Screen name="LoginScreen" component=LoginScreen />
          <Stack.Screen
            name="PersonalInfoScreen"
            component=PersonalInfoScreen
          />
        </>
      ) : (
        <>
          <Stack.Screen name="TabStack" component=TabStack />
        </>
      )
    </Stack.Navigator>
  );
;

export default LoginStack;

TabStack.js

import createBottomTabNavigator from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

const TabStack = () => 
  return (
    <Tab.Navigator
      screenOptions=...mySetting
      tabBarOptions=...myStyle,
      >
      <Tab.Screen name='Free' component=FreeStack />
      <Tab.Screen name='Video' component=VideoStack />
      <Tab.Screen name='News' component=NewsStack />
      <Tab.Screen name='Consultation' component=ConsulationStack />
      <Tab.Screen name='Setting' component=SettingStack />
    </Tab.Navigator>
  );
;

export default TabStack;

【参考方案1】：

如果查看嵌套导航 https://reactnavigation.org/docs/5.x/configuring-links/#handling-nested-navigators docs。

你有这个SettingScreen的导航树：

TabStack -> Setting -> SettingStack -> SettingScreen。

路由配置也应与此树匹配，如下所示：

const config = 
  screens: 
    // set config for App init screen
    PersonalInfoScreen: 
      path: "info_register/",
      parse: 
        token: (token) => `$token`,
      ,
    ,
    // set config for Tabs screen 
    TabStack: 
      screens: 
        Setting: 
          screens: 
            SettingScreen: "setting_register/:token",
          ,
        ,
      ,
    ,
  ,
;

【讨论】：

非常感谢，它正在工作。我没有注意到 TabStack 这个名字，谢谢！

输入命令adb shell am start -W -a android.intent.action.VIEW -d "test://setting_register/123" com.androidProjectId 有效。

太棒了。很高兴听到这个