React Native使用Stack Navigation报Object(...) is not a function如何解决

问题原因 #

你使用的 @react-navigation/native-stack 是依赖原生平台能力实现的导航库，本身不支持Web环境，因此在Expo Web端运行时会抛出 Object (...) is not a function 错误。

解决方案 #

• 优先选择纯JS实现的跨平台栈导航库 @react-navigation/stack 替换原生栈，它同时兼容iOS、Android、Web三端：
  1. 安装所需依赖：

  npm install @react-navigation/stack react-native-gesture-handler react-native-screens
  

  2. 修改App.js中的导入和初始化代码即可，其余导航逻辑不需要调整：

  // 把原来的native-stack导入语句替换为下面这句
  import { createStackNavigator } from '@react-navigation/stack';
  // 把原来的栈初始化语句替换为下面这句
  const Stack = createStackNavigator();
  

• 如果必须使用原生栈导航，需要额外配置Web端的兼容适配层，该方案适配成本较高，非必要不推荐。
• 如果替换后仍存在报错，可执行 npx react-navigation doctor 检测导航相关依赖的版本兼容性，修复版本不匹配问题后，删除node_modules文件夹和包管理锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml），重新安装依赖后再运行项目。

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