Drawer嵌套BottomTab时父级Drawer头部延迟渲染闪烁如何解决？

• Drawer Navigator 中嵌套了包含Home、Activity两个页面的Bottom Tab Navigator，通过底部Tab在两个页面间切换时，Drawer Navigator的头部会出现闪烁式隐藏效果，切回原页面头部重新显示时也存在相同的闪烁问题。
• 原有实现逻辑：在Tab.Screen的listeners属性中，监听页面的focus、blur事件，动态切换headerShown: true与headerShown: false的状态来控制头部显隐。
• 触发规律：头部渲染时机晚于其下方的页面组件，两个页面内包含的组件数量越多，头部显隐的延迟、闪烁效果越明显。

通过Tab切换事件动态修改headerShown的方案存在天然的时序差：Tab切换动画先触发执行，等事件回调执行、状态更新完成后，头部才会开始挂载/卸载流程，头部和页面内容不在同一个渲染调度周期，组件越多渲染耗时越长，时间差带来的闪烁就越明显。

彻底放弃通过事件动态控制Drawer默认头部显隐的实现思路，从架构层面规避状态更新带来的渲染时序问题，具体实现如下：

1. 固定关闭Drawer层的默认头部：找到Drawer Navigator中注册BottomTab Navigator的Drawer.Screen节点，直接写死配置options={{ headerShown: false }}，不再动态修改这个属性，从根源上消除头部动态挂载卸载的开销。
2. 实现自定义Drawer头部组件：封装通用头部组件，通过@react-navigation/native提供的useNavigation钩子调用navigation.openDrawer()方法实现原有汉堡菜单的打开逻辑，同时保留标题展示、右侧操作区等原有头部的功能。
3. 统一渲染自定义头部，可根据需求二选一：
   • 方案一：给BottomTab Navigator外层套一层固定布局容器，将自定义头部放在容器顶部固定渲染，BottomTab的页面渲染区域放在头部下方，切换Tab时头部全程不会卸载重渲染，完全无闪烁。
   • 方案二：如果不同Tab页需要展示不同的头部样式，可以将自定义头部引入到每个Tab页面的顶部位置，头部和页面内容同周期渲染，也不会出现时序差导致的闪烁。

注意：不要使用navigation.setOptions在页面聚焦时动态修改headerShown，这个方案和监听focus/blur事件的本质一样，都会存在状态更新的延迟问题，无法解决闪烁。

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