[mackwang112]

问题描述

在滴滴出行 App 的 DRN 容器中，Mpx demo 从二级页面返回首页后，首页导航栏返回按钮可能无法调用 onStackTopBack() 退出容器。折叠、展开设备触发安全区更新时更容易复现。

原实现通过渲染时读取的 navigation.getState().routes.length 判断是否为首页，但栈总长度并不代表当前页面在栈中的位置。二级页面打开时，后台仍挂载的首页会因安全区更新而重渲染，捕获栈长度 2；返回首页后，真实栈长度已为 1，导航栏没有订阅状态变化，点击回调仍使用旧值并执行 goBack()，导致无法退出容器。

埋点已确认出现“回调捕获栈长度为 2，点击现场 getState() 栈长度为 1”的情况，导航器的真实栈已正确更新。

复现方式

报告环境：滴滴出行 App DRN 容器、iPhone Duo 折叠屏模拟器、iOS 27.1、React 18.3.1、React Native 0.77.2，@mpxjs/core / @mpxjs/webpack-plugin 为 2.10.20-beta.2。

1. 展开设备，进入 demo 首页。
2. 从首页进入二级页面。
3. 在二级页面折叠设备。
4. 返回首页，再点击首页导航栏返回按钮。
5. 容器无法退出；再次展开设备触发首页导航栏重渲染后，返回按钮可能恢复。

在二级页面先折叠、再展开、最后返回首页，也可能复现。二级页面能正常返回首页，不代表首页退出容器正常。

预期：首页返回按钮调用 onStackTopBack() 退出 DRN 容器；非首页返回按钮调用 navigation.goBack()。

修复方案

• 使用 React Navigation 的 useRoute() 获取当前页面路由，通过 useNavigationState(state => state.routes[0].key === route.key) 订阅当前页面是否为栈底首页。
• 返回按钮显示和点击处理统一使用 isFirstPage，首页身份不随二级页面入栈改变，也能跟随导航状态更新。
• 按路由实例的 key 判断，不依赖页面路径，避免二级页面 redirectTo 首页路径时被误认为栈底首页。
• Hook 直接从 @react-navigation/native 导入，补齐现有类型声明，并更新相关测试。

测试结果

DRN 容器回归（用户提供）

场景	结果
普通进入二级页再返回	通过
二级页折叠后返回，首页再退出容器	通过
二级页折叠、展开后再操作返回	通过
二级页 redirectTo 首页路径	正确返回原首页，不提前退出容器
二级页 redirectTo 其他页面	通过
二级页 reLaunch 首页	正确更新为栈首页
三层页面及逐级返回	通过

本地自动检查

• 相关变更文件 ESLint、git diff --check：通过。
• jest --watchman=false --config packages/webpack-plugin/jest.config.json --runInBand packages/webpack-plugin/test/runtime/react-native/mpx-nav.spec.ts：3 项通过，覆盖配置合并、二级页面打开及返回期间的首页身份、按钮显示和订阅清理。
• jest --watchman=false --config packages/core/jest.config.json --runInBand packages/core/__tests__/rn/createApp.spec.js：25 项通过。