Question

我有一个带有两个堆栈（AuthStack和MainStack）的顶级SwitchNavigator MainStack包含一个已登录用户的堆栈。当我尝试从一个屏幕切换到另一个屏幕时，没问题，但是如果我启动了更改当前屏幕状态的操作，那么如果我离开然后再返回，则该状态保持不变，就好像我在卸载屏幕时一样在其他人之间切换。

工作示例：https://snack.expo.io/HJrslFk34

尝试移至设置，单击“添加”，然后在屏幕之间切换，状态保持不变，并且未卸载屏幕

const MainStack = createBottomTabNavigator(
        {
            [homeDrawerLabel]: {
                screen: HomeNavigator,
                navigationOptions: {
                    tabBarLabel: homeDrawerLabel,
                    tabBarIcon: ({ tintColor }) => (
                        <Ionicons
                            name="ios-bookmarks"
                            size={25}
                            color={tintColor}
                        />
                    ),
                },
            },
            [calendarDrawerLabel]: {
                screen: CalendarNavigator,
                navigationOptions: {
                    tabBarLabel: calendarDrawerLabel,
                    tabBarIcon: ({ tintColor }) => (
                        <Ionicons
                            name="ios-bookmarks"
                            size={25}
                            color={tintColor}
                        />
                    ),
                    headerLayoutPreset: "center",
                },
            },
            [messagesDrawerLabel]: {
                screen: MessagesNavigator,
                navigationOptions: {
                    tabBarLabel: messagesDrawerLabel,
                    tabBarIcon: ({ tintColor }) => (
                        <Ionicons
                            name="ios-bookmarks"
                            size={25}
                            color={tintColor}
                        />
                    ),
                },
            },
            [notificationsDrawerLabel]: {
                screen: NotificationsNavigator,
                navigationOptions: {
                    tabBarLabel: notificationsDrawerLabel,
                    tabBarIcon: ({ tintColor }) => (
                        <IconNavigatorWithBadge
                            badgeCount={3}
                            name="md-checkmark-circle"
                            size={25}
                            color={tintColor}
                        />
                    ),
                },
            },
            EditProfile: { screen: EditProfile },
            [paymentDrawerLabel]: {
                screen: PaymentsNavigator,
                navigationOptions: {
                    tabBarLabel: paymentDrawerLabel,
                    tabBarIcon: ({ tintColor }) => (
                        <Ionicons
                            name="ios-bookmarks"
                            size={25}
                            color={tintColor}
                        />
                    ),
                },
            },
        },
        {
            tabBarOptions: {
                activeTintColor: "#29C2AF",
                inactiveTintColor: "rgba(41, 194, 175, 0.4)",
                style: {
                    height: 60,
                    paddingVertical: 10,
                    borderTopColor: "rgba(0,0,0,0.2)",
                    shadowColor: "#000",
                    shadowOffset: {
                        width: 2,
                        height: 5,
                    },
                    shadowOpacity: 0.75,
                    shadowRadius: 3.84,
                    elevation: 7,
                },
            },
            headerMode: "none",
            headerLayoutPreset: "center",
        },
    );

    const AppNavigator = createSwitchNavigator(
        {
            AuthStack: AuthStack,
            Main: MainStack,
        },
        {
            headerMode: "none",
            initialRouteName: "AuthStack",
        }
    );

    const AppContainer = createAppContainer(AppNavigator);

Answer 1

使用React Navigation，在选项卡之间切换时不会卸载选项卡导航器视图。您可以在Navigation lifecycle - Example scenario的文档中查看反应导航中有关生命周期的详细信息，重要的部分在此处：

我们从主屏幕开始，然后导航到DetailsScreen。然后，我们使用选项卡栏切换到SettingsScreen并导航到ProfileScreen。完成此一系列操作后，所有4个屏幕均已安装！

如果您想知道活动选项卡上的内容并采取行动，您将寻找here

中概述的焦点/模糊事件。

createBottomTabNavigator保持堆栈安装

1 个答案: