反应导航 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.万一有人在没有解决方案之前遇到这个问题。此 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的key传给EditPage，然后使用密钥调用 goBack()。

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

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

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

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

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

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

initialRouteName: 'Posts'

Answer 4

对于新版本的 react-navigation 你可以使用 StackActions 如下：

 import { StackActions } from "react-navigation";

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

这将return您返回到父屏幕

Answer 5

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

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

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

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

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

Answer 6

对于 React Native Navigation v6 这对我有用：

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

navigation.dispatch(CommonActions.goBack());

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