web-dev-qa-db-fra.com

Réagir Navigation retour () et goBack () ne fonctionne pas

J'essaie de revenir en arrière sur deux écrans. Le but est de passer de EditPage à Cover. Voici ma pile de navigation:

Main -> Cover -> EditCover -> EditPage

J'ai lu la documentation et il est dit de fournir une clé de l'écran à partir duquel vous voulez revenir, voici mon code:

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

J'ai aussi essayé (sans succès):

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

La chose amusante dans tout cela est que je n’ai aucune erreur. Rien ne se passe lorsque le code est appelé ...

P.S. Si je veux juste revenir en arrière d'un écran, ce code fonctionne bien:

this.props.navigation.goBack(null);

P.S.S. Si quelqu'un trouve cela avant qu'il y ait une solution. Ce hack fonctionne pour l'instant:

this.props.navigation.goBack(null);
this.props.navigation.goBack(null);
react-nativereact-navigation
10
Tom Krones

la propriété key pour goBack() est une chaîne créée de manière dynamique, créée par react-navigation lors de toute navigation vers un nouvel itinéraire.

par exemple:  enter image description here

Il est stocké dans this.props.navigation.state.key .

Donc, si vous voulez passer de EditPage à Cover, vous devez passer la clé de EditCover à EditPage, puis appeler goBack() avec la clé.

Pourquoi pas la clé de Cover mais EditCover?

parce que react-navigation ne fournit que la méthode goBack(key) , c'est revenir de la touche, pas revenir à la touche.

Éventuellement, fournissez une clé qui spécifie l'itinéraire à partir duquel vous revenez de . Par défaut, goBack ferme la route à partir de laquelle il est appelé. Si la L’objectif est de rentrer n’importe où, sans spécifier ce que l’on obtient. fermé, appelez .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>
    );
}
27
Val

Pour React navigation 2, vous pouvez utiliser

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

Aussi, ne pas oublier de mentionner dans chaque stacknavigator

initialRouteName: 'Posts'
0
Rajesh Nasit