React native开发中常见的错误

react native环境搭建请移步：react native环境搭建

这里说说react native创建完成之后，运行中出现的常见问题，

问题1：

java.lang.RuntimeException: SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.

这个是原因是工程找不到我们的android SDK。

解决方法：在工程的根目录下的android文件下新建一个local.properties的文件（我们可以直接拷贝Android项目的local.properties的文件）。


问题2：

A problem occurred configuring project ':app'.>failed to find Build Tools revision 23.0.1
这个是因为Build Tools revision 23.0.1和我们的sdk里面的版本不一致导致的。

解决方法：这里注意build.gradle和gradle中gradle-wrapper.properties的对应关系。


问题3

Could not install the app on the device, read the error above for details.

这个是因为未找到运行的设备

解决方法：注意在运行命令：react-native run-android之前一定要确保手机已经连接上电脑。
问题4

com.android.ddmlib.InstallException: Failed to establish session

这是小米手机调试的问题，我之前用魅族就没这问题

解决方法：小米手机设置里-------开发者选项---------启用MIUI优化关闭


问题5

SyntaxError:Strict mode does not allow function declaration in a lexically nested。


解决方案：
使用react-native init创建了一个新项目，在package.json中使用的react-native的版本如下：

"dependencies": {
"react": "15.4.1",
"react-native": "0.39.1"
}


报出如下图所示的错误：

SyntaxError

SyntaxError:Strict mode does not allow function declaration in a lexically nested statement.


解决办法
第一种解决方案

打开
.\node_modules\react-native\Libraries\Core\InitializeCore.js 112行。
代码如下图：


将function handleError(e, isFatal)替换成var handleError = function(e, isFatal)
如下图所示：


最终执行npm start -- --reset-cache或者reload，解决问题。
第二种解决方案

将react-native版本改成0.38.0也能解决问题。

"dependencies": {
"react": "15.4.1",
"react-native": "0.39.1"
}

改成

"dependencies": {
"react": "15.4.1",
"react-native": "0.38.0"
}

问题原因

  react-native的源码问题，在use strict严苛模式下，不允许如上的方式声明函数，会编译不通过，fackbook官方应该会会快修复这个问题。感谢阅读，希望能帮到你。


问题6
Could not connect to development server.
来看一张图：

大体意思是：
连接不到开发的服务器。
请按照以下的步骤来修复此问题：
确保包服务器在运行
确保你的设备或者模拟器连接着电脑，并且手机打开了USB调试模式，然后在cmd中运行adb devices来查看已经连接好的设备列表
确保飞行模式是关闭的
如果是使用真机来开发，输入 adb reverse tcp:8081 tcp:8081来检查设备
输入IP：8081（这个大家都会）
首先我是启动了服务的，并且打开了浏览器调试：
[javascript] view plain copy

http://localhost:8081/index.android.bundle?platform=android

查看端口信息
[javascript] view plain copy

adb reverse tcp:8081 tcp:8081


在没有的话可以打开dev Settings输入IP：8081调试就不多说了。

问题7
Could not install the app on the device, read the error above for details.
这个是因为react-native版本升级了，但是在项目的build.gradle没有改成升级的版本号。

问题8
com.android.ddmlib.InstallException: Failed to install all

解决方案：小米手机设置里-------开发者选项---------启用MIUI优化关闭

其他问题补充：

Q：RN所支持的最低iOS和Android版本？

A：Android >= 4.1 (API 16)

iOS >= 7.0

Q：RN和cordova/phonegap是一个东西吗？

A：不一样。RN不是一个webview（但包含了webview组件），不能直接复用web页面代码。RN的性能接近原生，超过cordova/phonegap。

Q：可以使用现有的js库吗？

A：由于RN理论上更接近nodejs的运行环境，所以对nodejs的库兼容更好一些。浏览器端的js库，涉及到DOM、BOM、CSS等功能的模块无法使用，因为RN的环境中没有这些东西

Q：如何升级RN版本？

A：请用编辑器打开项目目录中的package.json，找到类似下面的一行配置

"react-native": "0.31.0"


Q：应该使用什么IDE开发？

A：虽然常用的JS编辑器很多，但由于RN大量使用jsx和es6语法，目前只有sublime text（通过插件）和webstorm（10以上版本）提供了良好的支持。笔者推荐webstorm，因为它有更完善的语法提示和补全。另外虽然主要的业务逻辑是使用js开发，但仍然要依赖于原生的编译/调试环境，所以你还需要同时运行Xcode（iOS）或Android Studio（android）等。


Q：如何开启调试功能？

A：点击iOS模拟器顶部的Hardware菜单，选择Shake Gesture（对应真机摇一摇），会自动弹出如下图的菜单。

安卓模拟器则是点击菜单键，真机上没有菜单键的，摇一摇即可。

选择Debug in Chrome即会启动Chrome作为运行和调试环境（注意此时JS引擎为Chrome的V8，与iOS真机的javascriptCore引擎存在一些差异）。选择Inspect Element即可以像调试网页元素一样查看布局元素的样式，但比较简陋。React Devtools插件可装可不装，它只用来查看布局，不影响调试，且在目前的版本（>0.13）中还无法正常加载。


Q：使用ListView时报错：Sticky header index 0 was outside the range {...}

A：看起来是个数组越界错误，但多数情况下是由于ListView的子组件渲染错误（如套数据时没有检查undefined等）引起，而非ListView本身的问题。


Q：在使用Navigator的同时使用ListView或ScrollView，后两者的头部会多出一些空间。

A：将automaticallyAdjustContentInsets属性设为{false}.