更改登录状态后，React Navigation不会重新渲染堆栈导航器

Question

在App.js中，我有一个堆栈导航器，其中每个Stack.Screen都基于boolean isLoggedIn（从全局上下文）有条件地包含在内。

<NavigationContainer>
      <Stack.Navigator screenOptions={{
        headerStyle: {
          backgroundColor: '#7B1FA2',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      }}>
        {loginContext.isLoggedIn == false ? (
         <>
        <Stack.Screen name='Landing' component={LandingTabs} options={{headerShown: false}}/>
        <Stack.Screen name='Home' component={HomeTabs} options={{title: "Bins"}}/>
        <Stack.Screen name='Login' component={Login}/>
        <Stack.Screen name='SelectFacilityScreen' component={SelectFacility} options={{title: "Select Storage Facility"}}/>
        <Stack.Screen name='InitialAppointmentScreen' component={InitialAppointment} options={{title: "Schedule Appointment"}}/>
        <Stack.Screen name='AccountInfoScreen' component={UserInfo} options={{title: "Create an Account"}}/>
        <Stack.Screen name='BillingInfoScreen' component={BillingInfo} options={{title: "Billing Info"}}/>
        </>
      ) : (
        <>
        <Stack.Screen name='Home' component={HomeTabs} options={{title: "Bins"}}/>
        <Stack.Screen name='StorageInventoryScreen' component={StorageInventory} options={{title: "Deliver"}}/>
        <Stack.Screen name='ScheduleAppointmentScreen' component={ScheduleAppointment} options={{title: "Schedule Appointment"}}/>
        <Stack.Screen name='ReviewScreen' component={Review} options={{title: "Review"}}/>
        <Stack.Screen name='ConfirmationScreen' component={Confirmation} options={{title: "Confirmation"}}/>
        <Stack.Screen name='HomeInventoryScreen' component={HomeInventory} options={{title: "Pickup"}}/>
        <Stack.Screen name='NewItemScreen' component={NewItem} options={{title: "Pickup"}}/>
        <Stack.Screen name='EditAccountScreen' component={Account}/>
        </>
      )}
      </Stack.Navigator>
    </NavigationContainer>

在App.js中，我还有一个标签导航器。目的是将其嵌套在堆栈导航器内部，以便当您在Stack Navigator中访问屏幕 Home 时，它将呈现选项卡导航器。

<Tab.Navigator screenOptions={({ route }) => ({
          tabBarIcon: ({color}) => {
            let iconName;

            if (route.name === 'Home') {
              iconName = 'ios-home';
            } else if (route.name === 'Account') {
              iconName = 'ios-person';
            } else if (route.name === 'Orders') {
              iconName = 'ios-list';
            }

            return <Ionicons name={iconName} size={22} color={color} />;
          },
        })}
        tabBarOptions={{
          activeTintColor: 'white',
          inactiveTintColor: 'gray',
          style: {backgroundColor: '#7B1FA2'}
        }}
        initialRouteName='Home'
      >
      <Tab.Screen name="Orders" component={Orders}/>
      <Tab.Screen name="Home" component={Home}/>
      <Tab.Screen name="Account" component={Account}/>
    </Tab.Navigator>

当我尝试注销时，出现了我的问题。在选项卡导航器中的 Account 组件中时，我尝试将上下文 isLoggedIn 更新为false，以便堆栈导航器重新渲染屏幕以包括登陆，然后将您置于该组件的屏幕上。我已经确认，当 isLoggedIn 更改为false时，堆栈导航器确实包含着陆，但不会更改为该屏幕。我假设我“卡在”选项卡导航器中。如何做到当 isLoggedIn 设置为false时，我离开 Account 帐户并返回到 Landing 组件上的堆栈导航器中？