Go to parent element of parent stack

Question

I have this scenario where I have StackNavigator, nested in TabNavigator, nested in another StackNavigator.

const TabOneStack = StackNavigator({
  ScreenA: { screen: ScreenA },
  ScreenB: { screen: ScreenB }
});

const MainTabs = TabNavigator({
  TabOne: { screen: TabOneStack },
  TabTwo: { screen: TabTwoStack }
});

const Root = StackNavigator({
  HomeScreen: { screen: HomeScreen },
  MainTabs: { screen: MainTabs }
});

Everything works, but I can’t understand how to navigate, for example, from ScreenAthe main screen to the root directory StackNavigator. After the HomeScreenuser goes directly to ScreenA. The back button in the title in ScreenA works fine and brings me back to Home, but you need a way to get a button that brings me back to HomeScreen. this.props.navigation.goBack()does not work.

I also tried

const backAction = NavigationActions.reset({
  index: 0,
  key: null,
  actions: [
    NavigationActions.navigate({ routeName: 'HomeScreen'})
  ]
});    
this.props.navigation.dispatch(backAction));

but I get:

No route defined for HomeScreen key. Must be one of: "ScreenA", "ScreenB".

What is the right way to do this?

Answer 1

StackNavigator StackNavigator, :

class ScreenA extends Component {
    render() {
        return (<Button onPress={() => {
            this.props.navigation.dispatch({type: 'Navigation/BACK'});
        }} title='ScreenA. back to Home' />);
    }
}

this.props.navigation.dispatch() 'Navigation/BACK' , .
goBack() , goBack() - .

:

, @Jigar , . null goBack(). .

this.props.navigation.goBack(null);

Answer 2

this.props.navigation.goBack(null);

Answer 3

, :

:

this.props.navigation.dispatch(backAction));

this.navigator.dispatch(backAction);

  render() {
    return (
      <Root
        ref={(nav) => {
          this.navigator = nav;
        }}
      />
    );
  }