天天看点

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的文件)。

React native开发中常见的错误

问题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的对应关系。

React native开发中常见的错误

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优化关闭

React native开发中常见的错误

其他问题补充:

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)中还无法正常加载。

React native开发中常见的错误

q:使用listview时报错:sticky header index 0 was outside the range {...}

a:看起来是个数组越界错误,但多数情况下是由于listview的子组件渲染错误(如套数据时没有检查undefined等)引起,而非listview本身的问题。

q:在使用navigator的同时使用listview或scrollview,后两者的头部会多出一些空间。

a:将automaticallyadjustcontentinsets属性设为{false}.

继续阅读