react-native android-错误记录

1、
react-native run-android出现
FAILURE: Build failed with an exception.

细看是这样

  • What went wrong:
    Execution failed for task ':app:installDebug'.

com.android.builder.testing.api.DeviceException: No connected devices!

重点是这句话:No connected devices!
这种问题是因为没有设备运行或者模拟器没开,导致没有链接上网络,真机也要记得开启调试模式。

/***************************以下新手建议读*********************************/

Q:RN和React.js是一个东西吗?

A:RN和React.js共用一些抽象层,但具体有很多差异,且目标平台不同:RN目前只能开发iOS/Android App,而React.js用于开发web页面。

Q:RN有哪些已经上架的案例?

A:官方有一个showcase页面。我们也收集了一些国内的案例。如果你有作品想要推广,欢迎给我私信。

Q:RN可以在windows下开发吗?

A:对于iOS开发,可以通过虚拟机或黑苹果等方式,但很麻烦也不推荐。做iOS开发,迟早你都需要一台Mac电脑。

对于Android开发,理论上没问题。但由于FB的员工基本都用mac,没有怎么管过windows兼容性,所以目前的版本可能在windows上会遇到一些问题。

具体搭建方法请参考官方文档以及@天地之灵 总结的完整的windows环境搭建指南

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:可以使用现有的objc/swift/java库吗?

A:可以,但需要参照这篇文档和这篇文档进行修改。

Q:可以热更新吗?苹果允许吗?

A:官方没有提供热更新方案,但本站推出了完整的热更新方案,差异更新只需极小流量。苹果目前的政策明确允许基于javascriptCore的热更新。
环境搭建与编译问题

Q:创建新项目,react-native init AwesomeProject命令长时间无响应,或报错shasum check failed

A:由于众所周知的网络原因,react-native命令行从npm官方源拖代码时会遇上麻烦。请将npm仓库源替换为国内镜像:

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

另,执行init时切记不要在前面加上sudo(否则新项目的目录所有者会变为root而不是当前用户,导致一系列权限问题,请使用chown修复)。

Q:运行react-native run-android时报错,报错信息中含有Could not find tools.jar等字样

A:请在系统变量中添加classpath,指向jdk中的tools.jar。

Q:运行react-native run-android时报错,报错信息中含有SDK location...ANDROID_HOME等字样

A:请对照官方文档,配置ANDROID_HOME环境变量。

Q:运行react-native run-android时报错,报错信息中含有bintray.com、gradle.org等网址

A:请(强力)科学上网,反复再反复地重试。

Q:运行react-native run-android时报错,报错信息中含有not found:git、android-23、Build Tools revision x.x.x、appcompat-v7等字样

A:请对照官方文档以及@天地之灵 总结的完整的windows环境搭建指南仔细检查漏装的依赖项!(没错,再说一遍,要装全文档里提到的东西,,以及选择对应的版本号!)。

Q:运行react-native run-android时报错,报错信息中含有No connected devices!字样

A:既然是没有connected devices,那你就connect一个device咯!(usb连上真机,或启动一个模拟器)。

Q:运行react-native run-android时报错,报错信息中含有Unable to upload some APKs!字样

A:参照下图降级gradle版本

0_1459218230837_QQ图片20160329102338.png

Q:真机上运行时白屏!

A:请找到并打开悬浮窗权限。比如miui系统在这里打开悬浮窗权限。

Q:如何升级RN版本?

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

"react-native": "0.13.0",
将其改为要升级的版本号,如“0.15.0-rc”(当然要先确定这个版本已经发布到npm上了,如果配置中有^或~之类的符号,可以参考这篇文章来了解其含义。)。

然后在当前目录的命令行中执行npm i

如果提示权限错误则在前面加上sudo(windows下不需要).

npm i执行完毕且成功不报错之后,在项目目录中运行(注意这一步会覆盖原生代码,请事先备份原生代码,事后做比对)

react-native upgrade

对于0.14以下版本升级0.14的情况,还需要额外手动处理一下。

Q:报错:SyntaxError: Use of const in strict mode

A:请检查node版本(4.0以上)。

Q:Windows下报错:ERROR Watcher took too long to load

Try running watchman version from your terminal

A:请参照此文底部的说法修改。

Q:报错:Invariant Violation:Application XXXX has not been registered.

A:请确保index.*.js中的

AppRegistry.registerComponent('项目名',() => ...);

与appDelegate.m中的

RCTRootView*rootView = [[RCTRootViewalloc]initWithBundleURL:jsCodeLocation
moduleName:@"项目名" launchOptions:launchOptions];

或是MainActivity.java中的

@Override
protected String getMainComponentName() {
return "项目名";
}

都保持一致。

Q:应该使用什么IDE开发?

A:@tdzl2003: 有几个选择:

WebStorm,需要付费购买(学生党可凭edu邮箱在此申请免费授权),最新版对JSX、flowtype等语法支持均非常优秀。
Sublime,虽然会不断提示你是否要购买,然而根据用户协议可以无限期试用。插件系统非常强大,因此如果愿意折腾的话,是个非常不错的选择。
VS Code,微软出的开源跨平台编辑器,适用于编写web代码,也可以用于编写ReactNative项目。据说最近刚刚加入了对JSX的支持(也可能是插件?),整体上相当不错。
nuclide(网页国内无法打开),facebook发布的基于atom的IDE,据说非常不流畅。

另外虽然主要的业务逻辑是使用js开发,但仍然要依赖于原生的编译/调试环境,所以你还需要同时运行Xcode(iOS)或Android Studio(android)等。
开发与调试问题

Q:如何开启调试功能?

A:点击iOS模拟器顶部的Hardware菜单,选择Shake Gesture(对应真机摇一摇),会自动弹出如下图的菜单。
0_1450967966242_826615-967fd84e771b47f2.png
安卓模拟器则是点击菜单键(对于不同的模拟器,其对应键位不同,实在不知道的,可以在命令行中运行adb shell input keyevent 82来触发),真机上没有菜单键的,摇一摇即可。

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

Q:调试模式下报错:Runtime is not ready. Make sure...或是socket closed.

A:有时Chrome进程会失去响应,可以尝试手动将Chrome的React Native Debugger标签切换到前台再Reload模拟器页面。

Q:iOS模拟器突然变成了慢动作?

A:iOS模拟器有个slow animation的选项,其快捷键是commant + T,调试过程中容易误碰到。再按一次关闭这个选项即可。

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

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

Q:ListView的数据到底应该怎么配?

A:参考下图
0_1450968223329_826615-0b079d98f74d7d07.png

Q:使用Image时报错:You are trying to render the global Image variable as a React element. You probably forgot to require Image.

A:由于React的Image组件和全局的Image对象重名,所以使用Image组件时一定要记得在文件开头正确引入React的Image组件。

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

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

Q:有一些示例代码中有奇怪的问号,比如function foo(x:?string),代表什么意思?

A:这是通过一个名为flow的外部工具为javascript加上强类型检查的功能,不影响编译和运行。直接无视就好。

Q:报错:Adjacent JSX elements must be wrapped in an enclosing tag.

A:render方法中必须只能包含一个根元素。

Q:报错:Invariant Violation: onlyChild must be passed a children with exactly one child

A:一般是Touchable开头的几个组件,如果没有子元素或者指定多个并列子元素都会报错。

Q:报错:Invariant Violation: Element type is invalid

A:如果是引入新组件时报的错,据@tdzl2003 解释:
从ReactNative 0.16起,babel升级到了6.x版本。
在babel6中,require和export default不能直接配对使用。
所以,你要么把

var Hello = require('./components/Hello');

改为

import Hello from './components'

要么把

export default React.createClass({

改为

module.exports = React.createClass({

二者选其一,配对使用。

Q:如何获取服务器端数据/可以使用Ajax吗?

A:可以用ajax,以及大部分现有的ajax库,而且不受浏览器跨域限制。官方推荐用更简单的fetch api来替代传统的ajax.但目前还无法在Chrome中直接观测请求的详情。

Q:如何读写文件?如何调用摄像头?如何调用麦克风?等等

A:对于官方没有提供的组件或API,请自行在js.coach或github中搜索第三方实现。如果搜不到相关结果,你只能考虑自己用原生代码实现后整合进来。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,100评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,308评论 3 388
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,718评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,275评论 1 287
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,376评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,454评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,464评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,248评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,686评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,974评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,150评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,817评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,484评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,140评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,374评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,012评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,041评论 2 351

推荐阅读更多精彩内容