使用制表符堆栈时反应导航深度链接不起作用 [英] react navigation deep linking not working when use Tabs Stack

问题描述

版本：

"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包含令牌

但当我进入选项卡屏幕并尝试使用test://setting_register?token=1111时，App只是打开它而不是导航到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;

Linking.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;

推荐答案

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

您有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",
          },
        },
      },
    },
  },
};

这篇关于使用制表符堆栈时反应导航深度链接不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！