React Navigation back() 和 goBack() 不起作用 [英] React Navigation back() and goBack() not working

问题描述

我正在尝试返回两个屏幕.目标是从 EditPage 到 Cover.这是我的导航堆栈:

<代码>主要 ->封面 ->编辑封面 ->编辑页面

我阅读了文档，它说要提供您想要返回的屏幕键，这是我的代码:

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

我也试过(没有运气):

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

有趣的是，我没有发现任何错误.调用代码时什么都没有发生...

附言如果我只想返回一个屏幕，此代码可以正常工作:

this.props.navigation.goBack(null);

P.S.S.万一有人在有解决方案之前遇到这个问题.此 hack 暂时有效:

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

解决方案

它存储在this.props.navigation.state.key.

所以如果你想从EditPage转到Cover，你要做的就是将EditCover的key向下传递给EditPage，然后用key调用goBack().

为什么不是Cover的key而是EditCover?

因为 react-navigation 只提供了方法 goBack(key)，是从key返回，不是返回key.

<块引用>

可选地提供一个密钥，它指定要返回的路线.默认情况下，goBack 将关闭调用它的路由.如果目标是回到任何地方，而不指定得到什么关闭，调用 .goBack(null);

EditCover.js

render() {const { 状态，导航} = this.props.navigation;返回 (<查看><Button title="转到页面" onPress={ () =>{/* 向下传递键到 *EditPage* */导航('EditPage', { go_back_key: state.key });}}/></查看>);}

EditPage.js

render() {const { state, goBack } = this.props.navigation;const params = state.params ||{};返回 (<查看><Button title="Back to Cover" onPress={ () =>{/* 从 *EditCover* 返回到 *Cover* */goBack(params.go_back_key);}}/></查看>);}

I'm trying to go back two screens. The goal is to go from EditPage to Cover. Here is my navigation stack:

Main -> Cover -> EditCover -> EditPage

I read the docs and it says to supply a key of the screen you want to go back from, here's my code:

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

I've also tried (with 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 about all this is that I get no errors. Nothing happens when the code is called...

P.S. If I want to just go back one screen, this code works fine:

this.props.navigation.goBack(null);

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

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

解决方案

The key property for goBack() is a dynamically created string, created by react-navigation whenever it navigates to a new route.

for example:

It is stored in this.props.navigation.state.key.

So if you want to go from EditPage to Cover, what you have to do is to pass the key of EditCover down to EditPage, and then call goBack() with the key.

Why not key of Cover but EditCover?

Because react-navigation only provides the method goBack(key), it's go back from key, not go back to key.

Optionally provide a key, which specifies the route to go back from. By default, goBack will close the route that it is called from. If the goal is to go back anywhere, without specifying what is getting closed, call .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>
    );
}

这篇关于React Navigation back() 和 goBack() 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！