react-native-date-picker超时跳转时模态框无法关闭问题求解

• 模态框挂载层级异常：react-native-date-picker的模态模式默认挂载到应用原生根视图节点，不属于当前业务页面的视图树范畴。登录超时触发路由回退到登录页时，路由栈只会卸载对应业务页面下的组件，无法触达挂载在根节点的日期选择器模态实例，最终出现模态框悬浮在顶层无法消失的现象。
• 两种尝试方案失效的具体原因：
  • forwardRef获取实例返回null：该库本身没有对外暴露支持命令式调用的ref实例方法，从设计上就不支持通过ref直接触发关闭操作，拿不到实例属于正常表现。
  • componentDidUpdate中修改open属性为false不生效：登录超时触发路由跳转时，承载DatePicker的业务页面已经被路由栈卸载或进入失活冻结状态，组件的componentDidUpdate生命周期根本不会被触发，写在该生命周期内的状态更新逻辑完全不会执行，自然无法将关闭指令同步给日期选择器实例。

• 方案1：全局状态前置管控（推荐）
  不要将DatePicker的open显隐状态存在单个业务页面的局部state中，将所有日期选择器的显隐控制字段存入全局状态（Redux/Context/Zustand均可）。触发登录超时逻辑时，先执行状态更新，把全局所有DatePicker对应的open字段统一置为false，等待100~200ms待视图更新完成、模态框完全关闭后，再执行路由跳转回登录页的操作。禁止先跳路由再更新状态，否则页面卸载后状态更新不会对已挂载的模态框生效。
• 方案2：全局路由守卫统一处理
  在应用的全局路由拦截钩子中增加强制跳转的前置逻辑：只要触发登录超时、权限踢出这类非用户主动触发的强制路由跳转，先触发全局状态更新关闭所有打开的DatePicker模态框，待视图更新完成后再放行路由跳转动作，从全局层面避免漏处理。
• 方案3：全局单例兜底
  在应用根组件挂载一个全局复用的DatePicker组件，所有业务场景的日期选择需求都通过全局状态修改这个单例组件的属性（日期模式、默认值、确认回调、显隐状态）实现。因为该组件始终挂载在根视图不会随业务页面卸载，只要全局状态修改open为false就一定能触发关闭，完全规避页面卸载后模态框残留的问题。

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