react-native - React Navigation back() 和 goBack() 不起作用

Question

我正在尝试返回两个屏幕。目标是从 EditPage至Cover .这是我的导航堆栈:
Main -> Cover -> EditCover -> EditPage
我阅读了文档，它说要提供您要返回的屏幕的键，这是我的代码:

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

这一切的有趣之处在于我没有出错。调用代码时没有任何 react ...

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

this.props.navigation.goBack(null);

P.S.S.万一有人在有解决方案之前遇到这个问题。这个黑客现在有效:

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

Answer 1

key goBack() 的属性是动态创建的字符串，由 react-navigation 创建每当它导航到新路线时。

例如:


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

所以如果你想从 EditPage至Cover , 你要做的就是传递EditCover 的 key 下至 EditPage ，然后调用goBack()用 key 。

为什么不是Cover的键但是 EditCover ?

因为 react-navigation 只提供了方法 goBack(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>
    );
}

编辑页面.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>
    );
}