单击另一个 BottomTabNavigator 选项卡后，“重置”堆栈导航器答案

【问题标题】："Reset" stackNavigator, after clicking in another BottomTabNavigatorTab单击另一个 BottomTabNavigator 选项卡后，“重置”堆栈导航器
【发布时间】：2019-03-20 00:19:53
【问题描述】：

我目前有这个导航架构：

BottomTabNavigator

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

卡片列表堆栈

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

});

类列表堆栈

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...卡片仍然打开。当我打开课程详细信息，更改堆栈然后返回时，也会发生同样的事情。当我移回堆栈时，有什么方法可以“重置”堆栈？

【问题讨论】：

标签： react-native react-navigation bottomnavigationview

【解决方案1】：

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

但是，当我导航到它时，我也尝试过“重置”一个选项卡，但发现解决方案令人沮丧。

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

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

希望其中一项有所帮助！

【讨论】：

【解决方案2】：

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

像这样：

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

【讨论】：