"Reset" 堆栈导航器，单击另一个 BottomTabNavigator 选项卡后

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',
});

所以基本上我有两个标签：第一个是关于卡片的，你可以看到你的卡片列表，点击查看特定卡片的详细信息。在第二张中你可以找到你的 classes，特别是看到一张 class 然后点击查看它有的卡片。

我面临的问题是，当我在 CardListStack 中并执行以下操作时：打开一张卡片，转到 ClassListStack，然后返回到 CardListStack...卡片仍然打开.当我打开 class 详细信息、更改堆栈然后返回时，也会发生同样的事情。有什么办法可以 "reset" 当我回到堆栈时？

Answer 1

我相信这是 StackNavigators 的预期行为。很多时候，您希望用户能够在特定选项卡的导航中尽可能向下导航，并且当他们离开选项卡并返回时，他们不希望所有进度都丢失。

但是，当我导航到它时，我也尝试过使用一个选项卡 "reset"，但发现解决方案令人沮丧。

这里有几种方法可以解决这个问题：

与其调用 navigation.navigate('CardListStack')，不如尝试更具体地说明您想要的确切屏幕，我认为是 CardListPage。 因此，navigation.navigate('CardListPage') 可能会完全按照您的意愿行事。 虽然取决于 react-navigation 的不同版本，但我在这方面遇到了很多麻烦。
使用navigation.popToTop()。这会让你回到顶部您所在的当前路线。所以在你导航回之后调用它 CardListStack 会让你回到 CardListPage，我认为是你想要什么。 但是，这并不理想，因为用户会看到卡片被解散并移回列表.
您还可以进入 Navigation Actions，看看那里可以做什么，如回答。

希望其中一项对您有所帮助！

Answer 2

选项卡导航器中的所有选项卡都会立即呈现，并且不会在您切换选项卡时重置。您需要在 tabnavigator 配置上使用 lazy 属性来使选项卡仅在激活或单击时呈现。

像这样：

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

"Reset" 堆栈导航器，单击另一个 BottomTabNavigator 选项卡后

"Reset" stackNavigator, after clicking in another BottomTabNavigatorTab

react-native

bottomnavigationview

react-navigation