1

我的应用程序中有以下导航结构：

<NavigationContainer ref={navigationRef} linking={linking}>
  <AppNavigator.Navigator>
    <AppNavigator.Screen name={RouteNames.bottomTabNav} component={BottomTabNavigator} />
    <AppNavigator.Screen name={RouteNames.mainStackNav} component={MainNavigator} />
  </AppNavigator.Navigator>
</NavigationContainer>

第一个屏幕实际上是标签栏导航器，第二个屏幕是堆栈导航器。

当我通过深度链接导航到主堆栈导航中的某个屏幕时，是否有可能同时在标签栏导航器中设置屏幕？

我试过类似的东西：

const linking = {
  prefixes: ['#####'],
  config: {
    // initialRouteName: { [RouteNames.bottomTab]: { screens: RouteNames.profile } },
    initialRouteName: RouteNames.bottomTab,
    screens: {
      [RouteNames.main]: {
        screens: {
          [RouteNames.settings]: RouteNames.settings,
        },
      },
    },
  },
};

注释行是我想要的（导航到选项卡栏导航器内的配置文件屏幕），但这不起作用。

4

1 回答 1

0

使用此实现，您无法使用其他导航器进行操作，您只能为单个导航器定义路径。要定义完整的导航状态（即为多个导航器定义路径），您需要您的配置参数是这样的：

config = {
  getStateFromPath: (path) => {
      return composeState()
  }
}

其中 composeState() 函数返回部分状态对象。例如：

const generateStackRoute = ({ tabRoute, stackRoute, params = {} }) => ({
  routes: [
    {
      name: RouteNames.bottomTab,
      state: {
        routes: [{ name: tabRoute }],
      },
    },
    {
      name: RouteNames.main,
      state: {
        routes: [{ name: stackRoute, params }],
      },
    },
  ],
});
于 2021-12-13T10:32:04.583 回答