自定义StackNavigator提示无法注册导航器，已包裹NavigationContainer如何解决？

数据老陈

2026-10-6

问题根因

你遇到的报错是依赖多实例冲突导致的上下文不共享：
你封装的独立包和宿主项目各自存在一份独立的@react-navigation/native实例，两者的NavigationContext完全隔离。你自定义导航器中调用的useNavigationBuilder来自独立包内置的@react-navigation/native，而宿主代码里的NavigationContainer来自宿主项目本身的@react-navigation/native，所以即使外层套了容器，自定义导航器也识别不到上下文。

解决方案

按以下步骤调整你的独立包配置即可：

1. 调整package.json依赖声明

把所有和React Navigation、React、React Native相关的公共依赖从dependencies移动到peerDependencies，同时保留在devDependencies保证本地开发正常运行：

{
  "peerDependencies": {
    "react": ">=18.0.0",
    "react-native": ">=0.69.0",
    "@react-navigation/native": "^6.0.0",
    "@react-navigation/stack": "^6.0.0"
  },
  "devDependencies": {
    "react": "^18.2.0",
    "react-native": "^0.72.0",
    "@react-navigation/native": "^6.1.10",
    "@react-navigation/stack": "^6.3.20"
  }
}

该配置会告诉包管理器，安装你的独立包时不会重复安装这些公共依赖，直接复用宿主项目已经安装的版本，从根源避免多实例问题。

2. 调整打包工具的外部依赖配置

如果你使用Rollup、tsup等工具打包，需要在配置中把这些公共依赖标记为外部依赖，不要打入你的包产物中：
以Rollup为例，配置如下：

// rollup.config.js
export default {
  // 其余配置保持不变
  external: [
    'react',
    'react-native',
    '@react-navigation/native',
    '@react-navigation/stack'
  ]
}