React Hooks中Material Tabs如何修改navigationState触发重渲染

React Navigation 下的 Tab Navigator 内置了配置记忆化逻辑，仅当内部维护的navigationState变更时，才会重新计算Tab项配置。普通组件层的state更新不会触发导航器配置重算，直接在JSX中按条件渲染Tab.Screen的写法，不会被导航器识别为配置变更，自然不会触发重渲染。
另外你现有代码的useEffect依赖配置错误：依赖数组写入isShow会导致状态更新后重复触发定时器、重复读取本地存储，产生无效逻辑。

方案1：绑定key强制导航器重挂载（实现成本最低） #

给Tab.Navigator绑定和业务状态关联的key属性，当业务状态变更时，key变化会触发导航器整体重新挂载，自动重建navigationState，同步最新的Tab配置。

const [isShow, setIsShow] = useState(false);
// 修正useEffect依赖，仅组件挂载时执行一次查询
useEffect(() => {
  setTimeout(() => {
    AsyncStorage.getItem('user_type').then(response => {
      if (response == 'admin') {
        setIsShow(true)
      }
    })
  }, 5000);
}, []);

return (
  {/* key随isShow变更，触发导航器重挂载更新navigationState */}
  <Tab.Navigator key={isShow ? 'admin-mode' : 'normal-mode'}>
    <Tab.Screen name="Home" component={HomeScreen} />
    {isShow && <Tab.Screen name="AdminCenter" component={AdminScreen} />}
  </Tab.Navigator>
)

注意：该方案会重置Tab导航下的所有页面栈状态，如果需要保留现有导航状态，使用方案2。

方案2：常驻Tab配置+动态显隐（无状态丢失） #

不要用条件渲染增减Tab.Screen，始终注册需要动态控制的Tab项，通过options配置控制Tab栏入口的显隐，配置会随组件state更新自动同步，不需要强制重挂载。

return (
  <Tab.Navigator>
    <Tab.Screen name="Home" component={HomeScreen} />
    <Tab.Screen 
      name="AdminCenter" 
      component={AdminScreen}
      options={{
        // 非管理员状态下隐藏Tab入口，可配合路由拦截禁止非授权访问
        tabBarButton: isShow ? undefined : () => null
      }}
    />
  </Tab.Navigator>
)

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