React Navigation：如何从堆栈返回另一个堆栈中的屏幕

Question

我在 React Native 中使用 react-navigation v2 并且每当我想返回根导航器中的路线时都会卡住。

我有以下路由堆栈：

const HomeStack = createStackNavigator(
  {
    Home: Home,
    CreateInvoice: CreateInvoiceScreen,
    InvoiceSummary: InvoiceSummaryScreen,
    PinEntry: PinEntryScreen
  },
  {
    navigationOptions: {
      header: null
    }
  }
);

const CustomersStack = createStackNavigator(
  {
    Customers: CustomersScreen,
    Details: CustomerDetailsScreen
  },
  {
    navigationOptions: {
      header: null
    }
  }
);

const Tab = createBottomTabNavigator(
  {
    Home: HomeStack,
    Transactions: TransactionsTab,
    Customers: CustomersStack,
    Settings: SettingsTab
  }
);

const Routers = createStackNavigator({
  splash: {
    screen: SplashScreen,
    navigationOptions: {...navigationOptions}
  },
  login: {
    screen: LoginScreen,
    navigationOptions: {...navigationOptions}
  },
  home: {
    screen: HomeScreen,
    navigationOptions: {...navigationOptions}
  }
});

我现在在Home 路由中，我想退出并返回login 路由。我尝试了以下代码：

_goBackToLogin() {
    const resetAction = StackActions.reset({
      index: 0,
      actions: [NavigationActions.navigate({ routeName: 'Home' })]
    });
    const goToLogin = NavigationActions.navigate({
      routeName: 'login'
    });
    this.props.navigation.dispatch(resetAction);
    this.props.navigation.dispatch(goToLogin);
}

但是，我没有得到任何结果，它仍然停留在Home 路由中。我的代码有什么问题？

Answer 1

您是否将导航器选项卡和路由器组合成单个导航器，如下所示

const Routers = createStackNavigator({
  splash: {
    screen: SplashScreen,
    navigationOptions: {...navigationOptions}
  },
  login: {
    screen: LoginScreen,
    navigationOptions: {...navigationOptions}
  },
  home: {
    screen: HomeScreen,
    navigationOptions: {...navigationOptions}
  },
  Tab: Tab
});

_goBackToLogin 和你的一样。