«Сбросить» stackNavigator, после нажатия в другой BottomTabNavigatorTab

Question

В настоящее время у меня есть эта схема навигации:

BottomTabNavigator

export const HomePageBottomNavigator = createBottomTabNavigator(
{
    CardListStack: {
        screen: CardListStack,
        navigationOptions: () => ({
            title: 'My Cards'
        })
    },
    ClassListStack: {
        screen: ClassListStack,
        navigationOptions: () => ({
            title: 'My classes'
        })
    }
})

CardListStack

export const CardListStack = createStackNavigator(
{
    CardListPage: {
        screen: CardListPage
    },
    CardPage: {
        screen: CardPage,
        headerMode: 'none'
    }
},
{
    headerMode: 'none',
    navigationOptions: {
        headerVisible: false
    },
    initialRouteName: 'CardListPage'

});

ClassListStack

export const ClassListStack = createStackNavigator(
{
    ClassesListPage: {
        screen: ClassesListPage
    },
    ClassPage: {
        screen: ClassPage,
        headerMode: 'none'
    },
    CardPage: {
        screen: CardPage,
        headerMode: 'none'
    }
},
{
    headerMode: 'none',
    navigationOptions: {
        headerVisible: false
    },
    initialRouteName: 'ClassesListPage',
});

Так что, в основном, у меня есть две вкладки: первая - все о картах, вы можете просмотреть список своих карт и щелкнуть, чтобы увидеть детали конкретной карты. Во втором вы можете найти свои классы, увидеть один конкретный класс и щелкнуть, чтобы увидеть карты, которые у него есть.

Проблема, с которой я сталкиваюсь, заключается в том, что, когда я нахожусь в CardListStack и выполняю следующие действия: Откройте карту, перейдите к ClassListStack, затем вернитесь к CardListStack ... Карта все еще открыта. То же самое происходит, когда я открываю детали класса, меняю стек и затем возвращаюсь. Можно ли как-то «сбросить» стек, когда я вернусь к нему?

Answer 1

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

Тем не менее, я также попытался сделать вкладку «сброс», когда я перешел к ней, и нашел решения разочаровывающими.

Вот несколько способов подойти к этому:

• Вместопозвонив по номеру navigation.navigate('CardListStack'), попробуйте более точно определить, какой именно экран вам нужен, и я считаю, что это CardListPage. Следовательно, navigation.navigate('CardListPage') может делать именно то, что вы хотите. У меня было много проблем с этим, хотя в зависимости от разных версий react-navigation.
• Использование navigation.popToTop(),Это вернет вас к началу текущего маршрута.Таким образом, вызов этого после того, как вы вернетесь к CardListStack, вернет вас к CardListPage, что, я думаю, то, что вы хотите. Однако это не идеально, потому что пользователь увидит анимацию отклонения карты и возврата к списку.
• Вы также можете перейти к действиям навигации и посмотреть, что может бытьсделано там, как ответили здесь .

Надеюсь, одна из этих подсказок!

Answer 2

Все вкладки внутри навигатора вкладок отображаются немедленно, и они не будут сброшены при переключении вкладок.вам нужно использовать свойство lazy в конфигурации tabnavigator, чтобы вкладки отображались только тогда, когда они стали активными или нажатыми.

Вот так:

export const HomePageBottomNavigator = createBottomTabNavigator(
{
    CardListStack: {
        screen: CardListStack,
        navigationOptions: () => ({
            title: 'My Cards'
        })
    },
    ClassListStack: {
        screen: ClassListStack,
        navigationOptions: () => ({
            title: 'My classes'
        })
    }
},
{
   lazy:true
}
)