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 config上使用lazy属性，以使选项卡仅在激活或单击时才呈现。

赞：

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

单击另一个BottomTabNavigatorTab

2 个答案: