react-navigation切换登录状态后抽屉导航菜单项未更新问题

代码存在3个核心问题导致抽屉菜单无法随登录状态同步更新：

• 用全局普通变量hasLogin存储登录状态，修改普通变量不会触发React组件重渲染，导航器无法感知状态变化
• MenuItens被作为普通函数直接调用，它内部声明的useState属于独立作用域，和外层导航器、登录页的逻辑完全割裂，没有任何逻辑能触发它的状态更新
• 登录状态没有提升到所有关联组件的共同父层托管，各模块各自维护独立状态，无法实现同步

将登录状态提升到最外层导航组件ShellNavigator中用useState统一托管，把状态更新方法通过路由参数透传给登录页，点击「FAKE LOGIN」时调用state更新方法触发组件重渲染，导航器会自动根据最新登录状态渲染对应菜单项。

完整可运行修复代码：

import * as React from 'react';
import { useState } from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';

const Drawer = createDrawerNavigator();

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        onPress={() => navigation.navigate('Login')}
        title="Go to login"
      />
    </View>
  );
}

function LoginScreen({ navigation, route }) {
    // 从路由参数中获取外层传入的登录状态更新方法
    const { setLoginStatus } = route.params;
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Button
          onPress={() => navigation.navigate('Home')}
          title="Go to Home"
        />
        <Button
          onPress={() => {
            // 调用state更新方法触发重渲染
            setLoginStatus(true);
            navigation.navigate('Home')
          }}
          title="FAKE LOGIN"
        />
      </View>
    );
  }

function ProfileScreen({ navigation }) {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Button
          onPress={() => navigation.navigate('Home')}
          title="Go to Home"
        />
      </View>
    );
}

export default function ShellNavigator() {
  // 登录状态提升到导航器根组件统一管理
  const [hasLogin, setHasLogin] = useState(false);

  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        {hasLogin ? (
          <Drawer.Screen name="Profile" component={ProfileScreen} />
        ) : (
          <Drawer.Screen 
            name="Login" 
            component={LoginScreen}
            initialParams={{ setLoginStatus: setHasLogin }}
          />
        )}
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

• 所有会影响UI渲染的状态不要用普通全局变量存储，必须通过React的useState/useReducer或者专用状态管理库托管，只有调用官方提供的状态更新方法才能触发组件重渲染
• 不要在JSX中直接调用自定义函数返回组件节点，要么将渲染逻辑直接写在父组件中，要么将自定义函数作为标准React组件以<Component />的形式渲染，同时做好状态同步
• 如果后续登录状态需要在大量页面/组件中使用，可以替换为React Context、Redux等全局状态方案，避免层层透传参数的麻烦

内容的提问来源于stack exchange，提问作者john