走向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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

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

友情链接更多精彩内容