React Native旧项目执行npx react-native start未显示新版Metro界面如何解决
旧React Native项目配置新版Metro启动界面方案
- 原理说明:带有Metro Bundler图标的新版交互式启动界面是React Native 0.68及以上版本配套的CLI新特性,旧项目显示旧样式是因为对应依赖版本低于适配要求。
- 操作步骤:
- 首先查询当前项目依赖版本,执行命令:
npm list react-native @react-native-community/cli metro
若返回的react-native版本低于0.68、或@react-native-community/cli版本低于8.0,就需要升级对应依赖。 - 升级依赖:
- 全量升级React Native版本(推荐,兼容性更好):执行
npm install react-native@latest --save - 若暂时不想升级全量RN版本,可单独升级CLI相关依赖:执行
npm install @react-native-community/cli@latest @react-native-community/cli-metro@latest metro@latest --save-dev
升级时如果出现依赖冲突报错,删除项目根目录下的node_modules文件夹和锁文件(package-lock.json/yarn.lock/pnpm-lock.yaml)后重新执行npm install即可。
- 校验启动命令:打开项目根目录的
package.json文件,确认scripts字段下的start命令为"react-native start",不要添加--no-interactive、--verbose这类会关闭交互式UI的参数。 - 重新执行
npx react-native start,即可看到新版启动界面。
- 首先查询当前项目依赖版本,执行命令:
内容的提问来源于stack exchange,提问作者Siva K
相关产品推荐
相关产品推荐

