React Native常见报错解决整理(转)

React Native 从开发环境到入门练手，再到跑几个开源 demo 的整个过程中，遇到了不少问题，以下是对报错现象及解决方法的记录：

Mac 上运行 iOS 项目

问题 1：
npm ERR! Unexpected end of JSON input while parsing near ‘…ire-main-filename":"^’
问题 1 解决：
运行 npm cache clean–force

问题 2：
Command run-android unrecognized. Make sure that you have run npm install and that you are inside a react-native project.
问题 2 解决：
进入自己的项目下，如 cd C:\Users\Feng\FirstApp; 然后再执行命令 npm install，安装完毕后，再执行 react-native run-android 命令

问题 3：
IOS - React Native - Unhandled JS Exception: SyntaxError

问题 3 解决：
最好在做之前先把 ios/build 文件夹先删除, 总共需要启动两个 terminal
第一个窗口输入命令 react-native start
第二个窗口输入命令 react-native run-ios
成功运行

问题 4：
Unable to resolve module ./../react-transform-hmr/lib/index.js

 

问题 4 解决：
关掉你的 cmd 窗口（其他的内置命令行同理）
mac 下操作
#Clean cache
rm -rf $TMPDIR/react-;
rm -rf $TMPDIR/haste-;
rm -rf $TMPDIR/metro-*;
watchman watch-del-all（无效）
#Start Metro Bundler directly
react-native start
# 重新打开一个命令行窗口
react-native run-ios
window 下操作
#Clean cache
react-native start --reset-cache
#new cmd tab 重新打开一个命令行窗口
react-native run-android
发现有其他坑的，建议去 gayhub 去找，还是那里最靠谱。

Windows 上运行 Android 项目

问题 1：
Unresolved function or method require()
问题 1 解决：
在使用 WebStorm 工具搭建 Node.js 文件时，提示 unresolved function or method require() 的错误，并且提示配置 Node.js 对应版本的 Core modules，解决办法为：

1. 在 WebStorm 中的 File 菜单项中选择 Setting–Javascript–libraries–Add 添加 Node.js v0.10.26 Core Modules 项，
2. Node.js v0.10.26 Core Modules 可以 online 和 offline 方式 set up
   安装完成后问题解决，并加载上了 Node.js v0.10.26 Core Modules 的核心库
   3. 重启 WebStrom
   --------------------- 本文来自 IMK7 的 CSDN 博客 ，全文地址请点击：https://blog.csdn.net/yidragon88xx/article/details/26487553?utm_source=copy

问题 2：
Cannot resolve symbol ‘PropTypes’
问题 2 解决：
安装依赖：npm install prop-types --save
调用方法：import PropTypes from ‘prop-types’
注：React.PropTypes 自 React v15.5 起已弃用。请使用 prop-types 库代替。

问题 3：
npm install 安装报错
npm WARN saveError ENOENT: no such file or directory, open ‘D:\RNProject\joplin
package.json’
npm WARN enoent ENOENT: no such file or directory, open ‘D:\RNProject\joplin\pac
kage.json’
npm WARN joplin No description
npm WARN joplin No repository field.
npm WARN joplin No README data
npm WARN joplin No license field.

 

问题 3 解决：
安装时指定版本号，npm install --save react-native@0.55.4

报错 4：
:app:generateDebugBuildConfig FAILED
FAILURE: Build failed with an exception.
What went wrong:
Execution failed for task ‘:app:generateDebugBuildConfig’.
java.io.IOException: Could not delete path ‘D:\RNProject\AwesomeProject\android\app\build\generated\source\buildConfig\debug\com’.
BUILD FAILED

报错 4 解决：
根据提示是 android 目录下 build 错误，删掉了 android/app/build 目录的几个文件夹

再次运行

报错 5：
手机界面错误提示：
The development server returned response error code: 500
URL: http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false

npm 服务器端
Loading dependency graph, done.
error: bundling failed: Error: Unable to resolve module @babel/runtime/helpers/ interopRequireDefault from D:\RNProject\AwesomeProject\index.js: Module @bab el/runtime/helpers/interopRequireDefault does not exist in the Haste module map

报错 5 解决：
首先，按照错误提示修复
npm watchman watch-del-all
npm rm -rf node_modules && npm install
npm rm -rf /tmp/metro-bundler-cache-*
npm rm -rf /tmp/haste-map-react-native-packager-*

报错 6：
Unable to resolve module AccessibilityInfo from xxx\node_modules\react-native\Libraries\ react-native\react-native-implementation.js: Module does not exist in the module map

报错 6 解决：
因为当前安装的 react-native-cli 的版本为 2.0.1 对应 react-native 版本为 0.55.4 能正常运行
通过 react-native -v 查看当前使用的 react-native 是最新版本 0.57.1

1、npm install --save react-native@0.55.4；

2、react-native upgrade，一路 y，最后提示 Successfully upgraded this project to react-native v0.55.4;

报错 7：
FAILURE: Build failed with an exception.
What went wrong:
Execution failed for task ‘:app:installDebug’.
com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: Failed to finalize session : -26:
Try:Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
BUILD FAILED

报错 7 解决：
根据错误提示，是关于项目 Android 编译版本的问题，参考 https://blog.csdn.net/qq_15364915/article/details/68059999 一文的解决方法
1、先修改 android 下 gradle 下 wrapper 的 gradle-wrapper.properties 配置文件，
distributionUrl=https://services.gradle.org/distributions/gradle-3.3-all.zip
2、app 下面的 build.gradle 文件：buildToolsVersion “25.0.0”

3、android 工程下的 build.gradle 文件： dependencies {classpath ‘com.android.tools.build:gradle:2.3.0’}

然后重新跑工程，运行 react-native run-android ，运行成功了

报错 8：
D:\RNProject\joplin\ReactNativeClient\index.android.js: Couldn’t find preset “mo
dule:metro-react-native-babel-preset” relative to directory “D:\RNProject\jopl
in\ReactNativeClient”

报错 8 解决：
新版本不兼容，babel-preset-react-native version : @3.0.0 存在问题，需要版本回退。
方案 1：使用 yarn 工具
$ yarn remove babel-preset-react-native
$ yarn add babel-preset-react-native@2.1.0
方案 2：使用 npm 工具
$ npm uninstall --save-dev babel-preset-react-native
$ npm install babel-preset-react-native@2.1.0
或
在命令行根项目目录下执行：npm install --save-dev babel-preset-react-native@2.1.0

安装之后，再次运行一遍，就可以出来了

报错 9：
unable to load script from assets ‘index.android bundle’ ,make sure your bundle is packaged correctly or youu’re runing a packager server

报错 9 解决：
1 在更目录的 XXXXX\android\app\src\main 目录下新建 assets 文件夹

2. 打开命令行，在自己项目更目录路径下面输入
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
【温馨提示：如果你的跟文件夹只有 index.js，输入上面代码。如果你的根文件是 index.android.js，则把上面 index.js 改成 index.android.js】
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

3. 输入完成之后，你会发现可以在 assets 里面生成两个文件夹。

报错 10：
error: bundling failed: Error: Couldn’t find preset “module:metro-react-native-b
abel-preset” relative to directory “D:\RNProject\joplin\ReactNativeClient”

 

报错 10 解决：
npm install metro-react-native-babel-preset

npm i babel-preset-react-native --save-dev
不起作用。
最终, 打开项目根目录下的. babelrc 文件，替换 “presets”: [“module:metro-react-native-babel-preset”] } 为 { “presets”: [“react-native”] }

报错 11：
error: bundling failed: Error: Cannot find module ‘./configs/main’ (While proces
sing preset: “D:\RNProject\joplin\ReactNativeClient\node_modules\babel-pres
et-react-native\index.js”)

报错 11 解决：
因为我安装了 babel-preset-react-native，卸载 npm uninstall babel-preset-react-native，并删项目根目录下的 node_modules\babel-preset-react-native 文件

报错 12：
Command run-android unrecognized. Make sure that you have run npm install and that you are inside a react-native project.
报错 12 解决：
项目根目录下，执行：npm install 或 npm install --save react-native@0.55.4

报错 13：
执行 npm install --save react-native@0.55.4 时报错
npm ERR! cb() never called!

报错 13 解决：
npm install -g npm & npm cache clean --force

报错 14：
npm 包管理器闪退
提示 pna.nextTick is not a function

报错 14 解决：
删除 node_modules 下对应的包，然后重新安装。

报错 15：
A problem occurred configuring project ‘:react-native-camera’.

报错 15 解决：
npm install react-native-camera@https://github.com/lwansbrough/react-native-camera.git --save
npm link react-native-camera
再在 android 的 AndroidManifest.xml 中添加以下权限

报错 16：
A problem occurred evaluating project ‘:react-native-camera’.
Could not find method google() for arguments [] on repository container.

报错 16 解决：
This worked for me : Make sure your react native version first , if you are using react-native < 0.40 then npm install --save react-native-camera@0.4
If react-native > 0.40 then do npm install --save react-native-camera@0.6
Link the react-native-camera using react-native link react-native-camera
Follow the steps below after linking.
in node_modules\react-native-camera\index.js

1. removed PropTypes from import React, {Component, PropTypes} from ‘react’;
2. add import PropTypes from ‘prop-types’;
   in package.json.
3. add in “dependencies” “prop-types”: “^15.6.0”

报错 17：
Native module RCTCameraModule tried to override RCTCameraModule for module name RCTCameraModule.if this was your intention,set canOverrideExistingModule=true

报错 17 解决：
在 https://github.com/wix/react-native-camera-kit/issues/132 找到的答案，去掉下面三处重复的部分

报错 18：
error: bundling failed: Error: Unable to resolve module react-navigation from
D:\RNProject\StarHome\App.js: Module react-navigation does not exist in the
Haste module map

 

报错 18 解决：
npm install --save react-navigation@1.0.0-beta.7

报错 19：
error: bundling failed: Error: Unable to resolve module react/lib/ReactComponen tWithPureRenderMixin from D:\RNProject\StarHome\node_modules\react-navigation\ src\views\Header.js: Module react/lib/ReactComponentWithPureRenderMixin does
not exist in the Haste module map

 

报错 19 解决：
1. 办法一：
“react”: “16.0.0-alpha.3”, “react-native”: “0.43.2”, “react-navigation”: “git+https://github.com/react-community/react-navigation.git#7edd9a7”
把 package.json 改成上面的版本 把 node-modules 文件夹删除，再 npm install .
2. 办法二：
将 header.js 第 12 行的代码
import ReactComponentWithPureRenderMixin from ‘react/lib/ReactComponentWithPureRenderMixin’; 删除

报错 20：
ReferenceError:Cant’t find variable:Navigator
This error is located at:
in App(at renderApplication.js:34)
in RCTView(at View.js:44)
in AppContainer(at renderApplication.js:33)

报错 20 解决：
未引入或未正确引入 Navigator 时

报错 21：
undefined is not a function (evaluating ‘_react.default.createClass’)

报错 21 解决：
ES5 创建组件的方式换成 ES6
例如：

换成