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

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

PS如果我只想返回一个屏幕，这段代码可以正常工作：

 this.props.navigation.goBack(null);

PSS 万一有人在没有解决方案之前遇到这个问题。这个黑客现在有效：

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

原文由 Dev01 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

--- 的 goBack() key 属性是一个动态创建的字符串，由 react-navigation 在导航到新路由时创建。

例如：

它存储在 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 ，然后用密钥调用 goBack() 。

为什么不是 Cover 的键而是 EditCover 的键？

因为 react-navigation 只提供了方法 goBack(key) ，所以是 从 key 回退，而不是 回退到 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>
    );
}

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

原文由 Val 发布，翻译遵循 CC BY-SA 4.0 许可协议