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

Question

我目前有这个导航模式：

底部选项卡导航器

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

Answer 1

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

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

以下是解决此问题的几种方法：

• 与其打电话给navigation.navigate('CardListStack')不如尝试更具体地了解您想要的确切屏幕，我相信这很CardListPage.因此，navigation.navigate('CardListPage')可能会完全按照您的要求进行操作。我遇到了很多麻烦，尽管这取决于不同版本的react-navigation。
• 使用navigation.popToTop().这将弹出您回到顶部 您当前所在的路线。因此，在导航回CardListStack会让你回到CardListPage，我认为这是 你想要什么。但是，这并不理想，因为用户会看到 卡被关闭并移回 列表。
• 您还可以进入导航操作，看看在那里可以做什么，如此处的回答。

希望这些帮助之一！

Answer 2

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

喜欢这个：

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