React Navigation back() и 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);
8
react-native react-navigation

2 ответов

the key собственность за goBack() - динамически созданная строка, созданная react-navigation когда перейти на новый маршрут.

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

хранящийся в this.props.navigation.state.key.

Итак, если вы хотите перейти от EditPage to 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>
    );
}
24

правильный способ сделать это с 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) - > Главная

нужно позвонить goBack (null) как это в компоненты:

this.props.navigation.goBack(null);

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

-2