单击另一个BottomTabNavigatorTab后，“重置”stackNavigator

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，我认为这就是你想要的。然而，这并不理想，因为用户将看到卡片的动画被解除并移回列表。
• 您还可以进入导航操作并查看可以在那里完成的工作，正如here所回答的那样。

希望其中一个有帮助！

Answer 2

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

像这样：

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