React Navigation: How to go back to a screen in another stack from a stack

问题

I'm using react-navigation v2 in React Native and was stucked whenever I wanna go back to a route in the root navigator.

I've the following route stack:

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}
  }
});

I'm now in Home route and I want to log out and go back to login route. I tried with following code:

_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);
}

But, I got no result, it still stay in Home route. What's wrong with my code?

回答1:

Did you combine the navigators Tab and Routers into single navigator as below

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

_goBackToLogin is same as yours.

来源：https://stackoverflow.com/questions/51946507/react-navigation-how-to-go-back-to-a-screen-in-another-stack-from-a-stack

标签

reactjs

react-native

react-navigation