React Navigation v6 Material底部标签内嵌Stack二次导航内容不显示问题

该现象是React Navigation v6 底部标签导航的默认缓存机制导致的：标签页失焦后，其内部嵌套的Stack导航器会被冻结，重新聚焦时默认不会触发重渲染流程。

方案1：标签失焦时卸载Stack（不需要保留栈历史时优先用） #

在对应Tab.Screen的options中开启unmountOnBlur配置，每次切走标签时自动卸载内部Stack，切回时重新初始化渲染：

<Tab.Screen
  name="YourStackName"
  component={YourNestedStack}
  options={{
    unmountOnBlur: true,
    // 其余tab配置项
  }}
/>

• 优点：配置成本极低，完全解决渲染异常问题
• 缺点：会丢失Stack的历史导航记录，切回标签时会回到Stack的首屏页面

方案2：保留Stack历史状态的修复方案 #

如果需要保留用户在Stack内的导航层级，不要卸载栈，可以通过监听聚焦事件触发重渲染：

方式1：用useIsFocused钩子触发重渲染 #

在Stack的根组件中引入钩子，将聚焦状态作为渲染依赖即可：

import { useIsFocused } from '@react-navigation/native';

function YourNestedStack() {
  // 组件会在聚焦状态变化时自动触发重渲染
  const isFocused = useIsFocused();

  return (
    <Stack.Navigator>
      {/* Stack的所有Screen配置 */}
    </Stack.Navigator>
  )
}

方式2：监听focus事件自定义更新逻辑 #

如果需要在标签聚焦时执行额外的刷新逻辑，可以手动监听聚焦事件：

import { useFocusEffect } from '@react-navigation/native';
import { useCallback } from 'react';

function YourStackScreen() {
  useFocusEffect(
    useCallback(() => {
      // 标签聚焦时执行的逻辑，比如刷新数据、强制重绘
      return () => {
        // 标签失焦时执行的清理逻辑
      };
    }, [])
  );

  // 组件渲染逻辑
}

兜底降级方案 #

如果上述方案都不生效，可尝试禁用react-native-screens的原生渲染优化，在项目入口文件（比如App.js）顶部添加如下配置：

import { enableScreens } from 'react-native-screens';
enableScreens(false);

• 该方案会损失部分页面切换性能，仅在前两个方案无效时使用

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