Create bottomtabnavigator保持安装堆栈

Question

我有一个带有两个堆栈(authstack and Mainstack(的顶级开关纳维格器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 -Necycl中的生命周期的详细信息：导航生命周期 - 示例场景，重要的部分在这里：

我们从房屋屏幕上开始，然后导航到详细信息屏幕。然后，我们使用标签栏切换到设置屏幕屏幕并导航到ProfileScreen。完成此操作序列后，所有4个屏幕都安装了！

如果您想知道并在"活动"选项卡上行动，您将要寻找的是此处概述的焦点/模糊事件