React Navigation back () and goBack () not working

Question

I am trying to return to two screens. The goal is to go from EditPageto Cover. Here is my navigation stack:

Main -> Cover -> EditCover -> EditPage

I read the docs and it says, to provide the screen key you want to return to, here is my code:

this.props.navigation.dispatch(NavigationActions.back({key: 'EditCover'}));

I also tried (no luck):

this.props.navigation.dispatch(NavigationActions.back('EditCover'));
this.props.navigation.dispatch(NavigationActions.back({key: 'EditCover'}));
this.props.navigation.dispatch(NavigationActions.back({routeName: 'EditCover'}));
this.props.navigation.goBack('EditCover');
this.props.navigation.goBack({key: 'EditCover'});
this.props.navigation.goBack({routeName: 'EditCover'});

The funny thing is that I get no errors. Nothing happens when the code is called ...

PS If I just want to return to one screen, this code works fine:

this.props.navigation.goBack(null);

PSS In case someone comes across this before there is a solution. This hack works now:

this.props.navigation.goBack(null);
this.props.navigation.goBack(null);

Answer 1

key goBack() - , react-navigation .

:

this.props.navigation.state.key.

, EditPage Cover, EditCover EditPage, goBack() .

Cover, EditCover?

goBack(key), , - .

, . goBack , . - , , , .goBack(null);

EditCover.js

render() {
    const { state, navigate } = this.props.navigation;    

    return (
        <View>
            <Button title="Go to Page" onPress={ () => {
                /* pass key down to *EditPage* */
                navigate('EditPage', { go_back_key: state.key });
            }} />
        </View>
    );
}

EditPage.js

render() {
    const { state, goBack } = this.props.navigation;    
    const params = state.params || {};

    return (
        <View>
            <Button title="Back to Cover" onPress={ () => {
                /* go back from *EditCover* to *Cover* */
                goBack(params.go_back_key);
            }} />
        </View>
    );
}

Answer 2

StackNavigation:

const AppNavigator = createStackNavigator({
    Main: {screen: MainScreen},
    Cover: {screen: CoverScreen},
    EditCover: {screen: EditCoverScreen},
    EditPage: {screen: EditPageScreen},
}, {
    initialRouteName: 'Main'
});

class App extends React.Component {
    render() {
        return <AppNavigator/>;
    }
}

, , , (),

EditPage (goBack) → EditCover (goBack) → Cover (goBack) → Main

goBack (null) :

this.props.navigation.goBack(null);

.

Answer 3

React navigation 2

this.props.navigation.dispatch(NavigationActions.back())

initialRouteName: 'Posts'

Answer 4

- StackActions :

 import { StackActions } from "react-navigation";

 const popAction = StackActions.pop({n: 1});
 this.props.navigation.dispatch(popAction);

Answer 5

,

1. this.props.navigation.goBack()
2. this.props.navigation.dispatch(NavigationActions.back())

:

• first team useful in a project with only one stacker
• The second command is useful in the bottom navigator.

In this case, the One Tab of Bottom navigator will have some screen. Thus, between navigation on any tab and navigation on another tab, you can use the second command.