You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

学习React Native Navigation导航功能运行代码报错如何解决

报错原因
  • 核心依赖缺失:React Navigation 运行需要react-native-screens、react-native-safe-area-context两个 peer 依赖,多数新手安装导航库时仅安装了@react-navigation/native和@react-navigation/native-stack,未安装上述依赖就会触发运行时报错。
  • JSX 语法不规范:你的代码中Stack.Screen组件的name属性和component属性之间没有空格分隔,不符合 JSX 语法要求,也会引发编译报错。
解决方法
  1. 补全依赖:
    在项目根目录执行对应包管理器的安装命令:
    npm 环境:
npm install react-native-screens react-native-safe-area-context

yarn 环境:

yarn add react-native-screens react-native-safe-area-context

如果是 iOS 原生项目,需要额外执行 pod 安装:

cd ios && pod install && cd ..
  1. 修正语法错误:
    将你代码里的Stack.Screen行修正为以下格式,补全属性间的空格:
<Stack.Screen name="Home" component={Home} options={{ title: 'Welcome' }} />
  1. 重启项目并清理缓存:
# Expo 项目执行
npx expo start --clear

# 原生 React Native 项目执行
npx react-native start --reset-cache

内容的提问来源于stack exchange,提问作者Anil

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.26 11:06:03