react-native - 使用选项卡堆栈时 react 导航深层链接不起作用

Question

版本:

"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;

Answer 1

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

您有 SettingScreen 的导航树:

TabStack -> 设置 -> 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",
          },
        },
      },
    },
  },
};