时间戳

首页 > 解决方案 > 自定义导航器中的嵌套导航器？导致多个路由器

reactjs - 自定义导航器中的嵌套导航器？导致多个路由器

问题描述

我在这里有一个嵌套的 PageWithStackNavigator，在 React Navigation 示例的这段代码中，用于自定义选项卡视图：

const CustomTabView = ({ descriptors, navigation }) => {
  const { routes, index } = navigation.state;
  const descriptor = descriptors[routes[index].key];
  const ActiveScreen = descriptor.getComponent();

  return (
    <SafeAreaView>
      <CustomTabBar navigation={navigation} />
      <ActiveScreen navigation={descriptor.navigation} />
    </SafeAreaView>
  );;
};


const CustomTabRouter = TabRouter(
  {
    PageWithStackNavigator,
    PageTwo,
  },
  {
    initialRouteName: 'PageWithStackNavigator',
  }
);

const navigator = createNavigator(CustomTabView, CustomTabRouter, {})
const CustomTabs = createNavigationContainer(navigator);

但是，这会导致多个路由器。此处看到的 CustomTabRouter，以及 PageWithStackNavigator 中的一个路由器。“this.props.navigation.goBack()”根据我是在选项卡内还是在 PageWithStackNavigator 内调用它来做不同的事情。

根据文档，我应该做一些类似“静态路由器 = AuthenticationNavigator.router;”的事情，但我不知道如何使用自定义 TabRouter 来做到这一点。

标签： reactjsreact-nativereact-navigation

解决方案

问题不在于有多台路由器，而在于 goBack 命令。

来自对我的 github 问题的评论：

我知道这很令人困惑，但您需要使用 goBack(null)。goBack() 助手会自动提供您要返回的键，然后限制在它所在的堆栈中。goBack(null) 表示从任何地方返回。

推荐阅读