Как перейти от дочернего стекового навигатора к родительскому при одновременном сбросе стека навигации в React Native

1

Я читал бесчисленные документы по интерактивной навигации, и я знаю, что есть способ сделать это, но это определенно то, что я бы назвал нетривиальным и определенно неинтуитивным.

У меня есть корневой навигационный стек:

export const NavigationStack = StackNavigator({
    Splash: {
        screen: Splash
    },
    Signup: {
        screen: Signup
    },
    Login: {
        screen: SignIn
    },
    ForgottenPassword: {
        screen: ForgottenPassword
    },
    Discover: {
        screen: Discover
    },
    ProfileShow: {
        screen: ProfileShow
    }
}, {
    headerMode: 'none'
})

Экран ForgottenPassword - это дочерний Stack Navigator:

import { StackNavigator } from 'react-navigation'
import PasswordResetProcess from './index'

const ForgottenPassword = StackNavigator({
    ResetPassword: {
        screen: PasswordResetProcess
    }
}, {
        headerMode: 'none'
    })

export default ForgottenPassword

В этом компоненте компонента index.js Container есть подкомпонент, к которому я index.js навигацию, например:

    switch (lastCompletedStep) {
        case NEW_RESET_REQUEST:
            return <InputTel navigation={navigation} />

        case INPUT_TEL:
            return <ResetPassword navigation={navigation} />

Этот компонент ResetPassword является тем, о котором идет речь. Он запускает создателя действия и передает this.props.navigation в создателя действия:

await props.handleResetSubmit(token, props.navigation)

Изнутри этого создателя действия, props.navigation доступен как navigation. Я могу сделать это хорошо:

navigation.navigate('Discover') // see how this is from the root Navigation Stack

Однако я не могу этого сделать:

navigation.dispatch({
    type: 'Navigation/RESET',
    index: 0,
    actions: [{ type: 'Navigate', routeName: 'Discover' }]
})

Это порождает эту ошибку:

Изображение 174551 [править] Я просто попробовал это, и он также сгенерировал ту же ошибку:

    navigation.dispatch(NavigationActions.reset({
        index: 0,
        actions: [NavigationActions.navigate({ routeName: 'Discover' })]
    }))

Как сбросить стек во время навигации, чтобы Discover здесь?

Я чувствую, что ответ заключается в том, чтобы перейти к обнаружению и сбросу стека одновременно с какой-то дочерней операцией, но я не знаю, с чего начать это вместе. Документация по react-navigation является ужасающей для иллюстрации операций родительских операций с родителями.

Вот моя лучшая догадка о том, как это примерно должно выглядеть:

navigation.dispatch({
    type: 'Navigation/NAVIGATE',
    routeName: 'Discover',
    actions: [{ type: 'Reset', index: 0, key: null }]
})
Теги:
react-native
react-navigation

1 ответ

1
Лучший ответ

Я просто решил это с помощью этого кода:

navigation.dispatch(NavigationActions.reset({
    index: 0,
    key: null,
    actions: [NavigationActions.navigate({ routeName: 'Discover' })]
}))

Секрет заключался в том, чтобы добавить key: null, который я видел раньше. Это очень важный элемент в моменты, когда вы перезагружаетесь.

Вот документация, которую я нашел, которая иллюстрирует это:

https://github.com/react-community/react-navigation/issues/1127

Я думаю, что это работает, потому что NavigationActions обладает знаниями о корневом стеке навигации, поэтому он работает по той же причине, что и работа с navigation.navigate('Discover') (в контексте моего кода в этом вопросе).

Ещё вопросы

Сообщество Overcoder
Наверх
Меню