React Navigation назад() и goBack() не работает

Я пытаюсь вернуться на два экрана. Цель состоит в том, чтобы перейти от 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);

Ответы

Ответ 1

Свойство key для goBack() - это динамически создаваемая строка, создаваемая react-navigation при каждом переходе на новый маршрут.

например: enter image description here

Он хранится в this.props.navigation.state.key.

Поэтому, если вы хотите перейти от EditPage к Cover, вам нужно передать ключ EditCover до EditPage, а затем вызвать goBack() с ключом.

Почему не ключ Cover, а EditCover?

Поскольку реагирующая навигация предоставляет только метод 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>
    );
}

Ответ 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/>;
    }
}

Согласно вашему вопросу, это порядок навигации по вашим экранам, поэтому, когда вы идете обратно (ноль), если вы находитесь в

EditPage (goBack) → EditCover (goBack) → Cover (goBack) → Main

Вы должны вызвать goBack (null) следующим образом:

this.props.navigation.goBack(null);

Это правильный путь.

Ответ 3

Для React navigation 2 и выше вы можете использовать

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

Также не забудьте упомянуть в каждом стекавигаторе

initialRouteName: 'Posts'

Ответ 4

Для новой версии реакции-навигации вы можете использовать StackActions следующим образом:

 import { StackActions } from "react-navigation";

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

Это вернет вас обратно на родительский экран

Ответ 5

В общем, мы можем использовать следующие две команды

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

мы должны использовать две команды в другом случае:

  • первая команда, полезная в проекте только с одним стекавигатором
  • Вторая команда полезна в нижнем навигаторе.

В этом случае навигатор One Tab of Bottom будет иметь некоторый экран. Таким образом, между навигацией по любой вкладке и навигацией по другой вкладке вы можете использовать вторую команду.