安装react-navigation后React Native项目无法启动求助

嘿，我看你用create-react-native-app搭建的项目，装完react-navigation之后直接启动失败了，控制台还提示React Native没装，这大概率是依赖版本不兼容或者安装缓存出问题了，我给你整理了几个解决步骤，试试应该能搞定：

问题根源分析 #

从你贴的信息来看，核心问题有两个可能：

• 你用的expo@25.0.0、react-native@0.52.0和安装的react-navigation@1.0.0-beta.27版本不匹配，CRNA项目对依赖版本的兼容性要求比较严格；
• npm安装过程中可能出现了缓存损坏、依赖缺失，导致项目误判React Native未安装。

分步解决方案 #

1. 彻底清理依赖并重装 #

先把现有依赖和缓存清干净，避免残留问题：

# Windows系统删除node_modules
rmdir /s/q node_modules
# macOS/Linux系统删除node_modules
rm -rf node_modules

# 删除锁文件（二选一，看你用npm还是yarn）
rm package-lock.json
# rm yarn.lock

# 清理npm缓存
npm cache clean --force

# 重新安装所有依赖
npm install

2. 安装与Expo 25兼容的react-navigation版本 #

Expo 25对应的react-navigation推荐版本是1.0.0-beta.23，这个版本和你的项目依赖匹配度更高，不会有冲突：

npm install --save react-navigation@1.0.0-beta.23

3. 重置缓存后启动项目 #

如果重装后还是启动失败，试试重置项目缓存：

npm start -- --reset-cache

4. 升级react-native-scripts（可选） #

你的react-native-scripts是1.10.0，可以升级到同系列的稳定版1.14.0，兼容性会更好：

npm install --save-dev react-native-scripts@1.14.0

附：你的项目相关信息 #

package.json配置 #

{ 
  "name": "EliteEl", 
  "version": "0.1.0", 
  "private": true, 
  "devDependencies": { 
    "react-native-scripts": "1.10.0", 
    "jest-expo": "25.0.0", 
    "react-test-renderer": "16.2.0" 
  }, 
  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js", 
  "scripts": { 
    "start": "react-native-scripts start", 
    "eject": "react-native-scripts eject", 
    "android": "react-native-scripts android", 
    "ios": "react-native-scripts ios", 
    "test": "node node_modules/jest/bin/jest.js" 
  }, 
  "jest": { "preset": "jest-expo" }, 
  "dependencies": { 
    "expo": "^25.0.0", 
    "react": "16.2.0", 
    "react-native": "0.52.0", 
    "react-navigation": "^1.0.0-beta.27" 
  } 
}

npm启动错误日志 #

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe', 'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js', 'start' ]
2 info using npm@5.5.1
3 info using node@v9.2.0
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle EliteEl@0.1.0~prestart: EliteEl@0.1.0
6 info lifecycle EliteEl@0.1.0~start: EliteEl@0.1.0
7 verbose lifecycle EliteEl@0.1.0~start: unsafe-perm in lifecycle true
8 verbose lifecycle EliteEl@0.1.0~start: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;E:\xampp\htdocs\lessons\REACT\EliteEl\node_modules\.bin;E:\Soft\Embarcadero\Studio\19.0\bin;C:\Users\Public\Documents\Embarcadero\Studio\19.0\Bpl;E:\Soft\Embarcadero\Studio\19.0\bin64;C:\Users\Public\Documents\Embarcadero\Studio\19.0\Bpl\Win64;E:\Soft\cuda\soft\bin;E:\Soft\cuda\soft\libnvvp;C:\ProgramData\Oracle\Java\javapath;E:\Soft\Anaconda3;E:\Soft\Anaconda3\Library\mingw-w64\bin;E:\Soft\Anaconda3\Library\usr\bin;E:\Soft\Anaconda3\Library\bin;E:\Soft\Anaconda3\Scripts;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;E:\xampp\php;C:\ProgramData\ComposerSetup\bin;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files\dotnet\;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;C:\Program Files\nodejs\;C:\Program Files\PuTTY\;C:\Go\bin;C:\Program Files (x86)\Yarn\bin;C:\ProgramData\chocolatey\bin;C:\Program Files\Java\jdk1.8.0_152\bin;C:\Program Files\Git\cmd;C:\Users\ykemer.SPA\AppData\Roaming\Composer\vendor\bin;C:\Users\ykemer.SPA\AppData\Roaming\npm;C:\Users\ykemer.SPA\AppData\Local\Yarn\bin
9 verbose lifecycle EliteEl@0.1.0~start: CWD: E:\xampp\htdocs\lessons\REACT\EliteEl
10 silly lifecycle EliteEl@0.1.0~start: Args: [ '/d /s /c', 'react-native-scripts start' ]
11 silly lifecycle EliteEl@0.1.0~start: Returned: code: 1 signal: null
12 info lifecycle EliteEl@0.1.0~start: Failed to exec start script
13 verbose stack Error: EliteEl@0.1.0 start: `react-native-scripts start`
13 verbose stack Exit status 1
13 verbose stack at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:280:16)
13 verbose stack at EventEmitter.emit (events.js:159:13)
13 verbose stack at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:159:13)
13 verbose stack at maybeClose (internal/child_process.js:943:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:220:5)
14 verbose pkgid EliteEl@0.1.0
15 verbose cwd E:\xampp\htdocs\lessons\REACT\EliteEl
16 verbose Windows_NT 6.1.7601
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
18 verbose node v9.2.0
19 verbose npm v5.5.1
20 error code ELIFECYCLE
21 error errno 1
22 error EliteEl@0.1.0 start: `react-native-scripts start`
22 error Exit status 1
23 error Failed at the EliteEl@0.1.0 start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

控制台错误信息 #

Error: React native is not installed. Please run `npm install` in your project directory.
16:36:47: Error starting packager: Error: Couldn't start project. Please fix the errors and restart the project.
at C:\xdl\src\Project.js:1291:11
at Generator.next (<anonymous>)
at step (C:\Users\ykemer.SPA\AppData\Roaming\npm\node_modules\react-native-scripts\node_modules\xdl\build\Project.js:1679:191)
at C:\Users\ykemer.SPA\AppData\Roaming\npm\node_modules\react-native-scripts\node_modules\xdl\build\Project.js:1679:361
at <anonymous>
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! EliteEl@0.1.0 start: `react-native-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the EliteEl@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\ykemer.SPA\AppData\Roaming\npm-cache\_logs\2018-01-24T12_36_47_683Z-debug.log

内容的提问来源于stack exchange，提问作者Yakov Kemer