走向React Native高阶开发的第一步——【上篇】

这段时间收到了很多关于RN技术的探讨和问题;有咱们小码哥的学员也有其他的RN开发爱好者,总结出来有以下几点:
**问: **
1) 不少公司逐渐用RN来构建移动端应用,但是却很难达到他们的开发要求?
2)FB的RN和阿里的Weex,哪个是趋势?该怎么取舍?
3)学完现有的课程,如何进阶学习?
4)小码哥能不能推出一套高阶的RN项目教学视频,360°无死角,解决关键技术盲区,从开发到上架?
答:
1)这是正常的,因为RN出来也就差不多1年,技术缺口还是比较大的,而且技术要求也是比较高的;
2)RN和Weex都是同一套东西,可能侧重的领域不一样,可以先学RN,毕竟强大的用户基数在那里,资源也相对会更多一些;有一定基础后,两者完全可以结合起来用,优势互补;
3)学完现有的RN课程,想要提升最好的方式,我觉得就是看github上比较高质量的开源源码,然后融入到你的项目中;
4)小码哥iOS学院的教研团队正在全力以赴的打造一套RN高阶视频,保证大家学完后能够完全胜任企业的开发要求。

----------------华丽的分割线---------------

先上一点之前视频中没有讲到的,但在开发中却非常实用的技术点:
一、延展操作符
RN是面向组件开发的,我们会在该组件的defaultProps中公开一些属性方便外界进行数据传递。如果只有几个props直接传递即可,但是当传递大量的props时会显得乱,容易出错。那么 ...(延展操作符,取出参数对象的所有可遍历属性) 来进行传递是一种好的选择。
[图片上传中。。。(1)]

二、真机调试
iOS:
(RN 0.29之前)

  1. 让运行的手机和电脑的WiFi在同一个局域网,获取到电脑的IP地址;
  2. 打开Xcode,找到AppDelegate添加如下代码:
    [图片上传中。。。(2)]
  3. 选择对应手机,点击Run即可

(RN 0.29之后)
直接运行即可

**Android: **

  1. 最好 Android 5.0+ (API 21)以上版本,可以直接通过adb reverse运行调试 或者 打成apk包;
  2. 在 Android 设备上打开 USB debugging 并连接上电脑启动调试;
  3. 打开终端,命令 react-native run-android 编译运行项目;
  4. 保持电脑和Android手机处于同一局域网(摇一摇 ---- Dev Settings ---- Debug server host for device ---- 输入当前电脑的ip地址 ---- 点击 Reload JS)

三、Android Studio中绑定Genymotion
3.1 安装插件

1474284181555368.png

3.2 退出重启,操作如下:
1474284205320199.png

3.3 关键的一步骤:
[图片上传中。。。(5)]
四、ref进阶使用
在之前的生命周期中讲到可以用ref获取真实的Dom节点,其实ref还有更加高级的用法,它的属性值不仅仅可以是string类型,也可以是function。比如:
[图片上传中。。。(6)]
ref在RN中的作用相当于CSS中的选择器,我们可以任意的去拿到任何组件,从而获取其的属性和方法做相应的操作。

五、优化界面切换卡顿
如果用NavigatorIOS来进行界面的切换十分流畅,因为其切换动画是跑在UI主线程上;但如果使用Navigator有时会有所卡顿,why? 因为它是跑在js线程上的,切换动画会使JS线程出现严重的掉帧。那该如何解决?
使用RN API中的InteractionManager组件,其作用让一些JS的操作在过渡动画完成之后执行,从而保证了动画的流程性。这是典型的牺牲时间换空间从而保证了帧数的高复用。比如界面的跳转:
[图片上传中。。。(7)]

六、让组件做到局部刷新
利用RN的状态机机制,我们可以通过this.setState({optional:...})来控制界面的刷新,但是一定会触发render方法,那如何保证不调用render方法从而做到界面的局部刷新呢?
那就是通过setNativeProps,不使用state和props,直接修改RN自带的组件,比如:View,Image,Text...,并且可以做到不触发RN组件生命周期中的方法。

1474284342742857.png

来源:
http://bbs.520it.com/forum.php?mod=viewthread&tid=2286&extra=page%3D3

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,263评论 25 707
  • 1 热发布 网页发布 VS APP发布 网页发布:服务端上线新的网页代码,用户端通过链接直接访问。 APP发布:�...
    kkmoving阅读 4,047评论 1 15
  • 秋风卷起了落叶 却送不去我对你的思念 气温一降再降 我对你的心意却与日俱增 落霞迎着灯光 去追寻明日的朝阳 温暖的...
    乌鸦吃蛋糕阅读 219评论 0 6
  • 深秋的日子笼罩着霾 雾,淡淡地 渲染着蒙蒙的天 潮湿地吹拂着缕缕青风 仿若晕开了的 阵年旧墨 十月的记忆 飘过一支...
    杜若心香阅读 359评论 0 4