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

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

P.S。如果我想回到一个屏幕，这段代码可以正常工作：

this.props.navigation.goBack(null);

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

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，然后致电{ {1}}使用密钥。

为什么不是goBack()的密钥，而是Cover？

因为反应导航只提供方法goBack(key)，从密钥返回，而不是返回密钥。

  

（可选）提供一个键，指定要返回的路径。   默认情况下，goBack将关闭从中调用它的路由。如果   目标是回到任何地方，而不指定得到什么   关闭，调用.goBack（null）;

<强> EditCover.js

EditCover

<强> EditPage.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>
    );
}

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）->封面（goBack）-> Main

您必须在组件中像这样调用 goBack（null）：

this.props.navigation.goBack(null);

这是正确的方法。

Answer 3

对于新版本的反应导航，您可以使用StackActions 如下：

 import { StackActions } from "react-navigation";

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

这将使您返回到父屏幕

Answer 4

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

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

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

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

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

Answer 5

对于React导航2及更高版本，您可以使用

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

也不要忘记在每个堆栈导航器中提及

initialRouteName: 'Posts'