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

Answer 1

该key物业goBack()是一个动态创建的字符串,通过创建react-navigation每当浏览到一个新的路径.

例如:

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

所以,如果你想从去EditPage到Cover,你所要做的就是要通过的关键EditCover下来EditPage,然后调用goBack()与关键.

为什么不是关键的Cover,但EditCover？

因为react-navigation只提供方法goBack(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-navtigation，您可以使用StackActions 如下：

 import { StackActions } from "react-navigation";

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

这将使您返回到父屏幕