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

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

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

this.props.navigation.goBack(null);

附言万一有人在有解决方案之前遇到这个问题。这个 hack 目前有效：

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

Answer 1

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

例如：

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

所以如果你想从EditPage转到Cover，你要做的就是将EditCover的密钥向下传递给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>
    );
}

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/>;
    }
}

根据你的问题，这是你的屏幕导航顺序，所以当你 goBack(null) 如果你在

EditPage (goBack) -> EditCover (goBack) -> Cover (goBack) -> Main

您必须在组件中像这样调用 goBack(null)：

this.props.navigation.goBack(null);

这是正确的方法。

Answer 3

一般我们可以使用以下两个命令

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

在另一种情况下我们必须使用两个命令：

• 在项目中第一个有用的命令只有一个 stacknavigator
• 第二个命令在底部导航器中很有用。

在这种情况下，底部导航器的一个选项卡将有一些屏幕。 因此，在任何选项卡的导航和另一个选项卡的导航之间，您可以使用第二个命令。

Answer 4

对于 React 导航 2 以后，您可以使用

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

也不要忘记在每个 stacknavigator 中提及

initialRouteName: 'Posts'

Answer 5

对于新版本的 react-navtigation，您可以使用 StackActions 如下：

 import { StackActions } from "react-navigation";

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

这将使您返回父屏幕

Answer 6

对于 react native navigation v6 这对我有用：

从 '@react-navigation/native' 导入 { CommonActions }；

navigation.dispatch(CommonActions.goBack());

https://reactnavigation.org/docs/navigation-actions