createBottomTabNavigator 保持安装堆栈

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，选项卡导航器视图在选项卡之间切换时不会卸载。你可以在他们的文档中看到有关 react-navigation 生命周期的详细信息：Navigation lifecycle - Example scenario，重要的部分在这里：

我们从 HomeScreen 开始并导航到 DetailsS​​creen。然后我们使用标签栏切换到 SettingsScreen 并导航到 ProfileScreen。完成这一系列操作后，所有 4 个屏幕都已安装！

如果您想知道并在活动选项卡上采取行动，您将寻找的是here 概述的焦点/模糊事件@