请选择 进入手机版 | 继续访问电脑版

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

发表于 2016-09-19 19:26 显示全部楼层 26 3815

本帖最后由 叶建华老师 于 2016-9-19 20:47 编辑

这段时间收到了很多关于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时会显得乱,容易出错。那么 ...(延展操作符,取出参数对象的所有可遍历属性) 来进行传递是一种好的选择。

Snip20160919_14.png


二、真机调试

iOS:

(RN 0.29之前)

1. 让运行的手机和电脑的WiFi在同一个局域网,获取到电脑的IP地址;

2. 打开Xcode,找到AppDelegate添加如下代码:

Snip20160919_13.png 

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 安装插件

Snip20160919_3.png

3.2  退出重启,操作如下:

Snip20160919_4.png


3.3 关键的一步骤:

Snip20160919_5.png

四、ref进阶使用

在之前的生命周期中讲到可以用ref获取真实的Dom节点,其实ref还有更加高级的用法,它的属性值不仅仅可以是string类型,也可以是function。比如:

Snip20160919_6.png

ref在RN中的作用相当于CSS中的选择器,我们可以任意的去拿到任何组件,从而获取其的属性和方法做相应的操作。


五、优化界面切换卡顿

      如果用NavigatorIOS来进行界面的切换十分流畅,因为其切换动画是跑在UI主线程上;但如果使用Navigator有时会有所卡顿,why? 因为它是跑在js线程上的,切换动画会使JS线程出现严重的掉帧。那该如何解决?

      使用RN API中的InteractionManager组件,其作用让一些JS的操作在过渡动画完成之后执行,从而保证了动画的流程性。这是典型的牺牲时间换空间从而保证了帧数的高复用。比如界面的跳转:

Snip20160919_8.png


六、让组件做到局部刷新

     利用RN的状态机机制,我们可以通过this.setState({optional:...})来控制界面的刷新,但是一定会触发render方法,那如何保证不调用render方法从而做到界面的局部刷新呢?

    那就是通过setNativeProps不使用state和props,直接修改RN自带的组件,比如:View,Image,Text...,并且可以做到不触发RN组件生命周期中的方法。  

Snip20160919_12.png

   如果喜欢我的文章,可以关注我微博:旋之华,也可以来小码哥,了解下我们的iOS培训课程。后续还会更新更多内容。。。


回复 使用道具
举报
破葫芦

发表于 02-08 15:26 显示全部楼层

前排支持!!

回复 支持 反对 使用道具
举报
涅槃兰心

发表于 02-08 15:16 显示全部楼层

回复 支持 反对 使用道具
举报
cocoabird

发表于 02-08 13:42 显示全部楼层

好文章,必须帮顶!!!

回复 支持 反对 使用道具
举报
西山霸王花

发表于 02-08 12:20 显示全部楼层

1 先请大家注意我的头像。看到什么诡异的吗。 2 然后请大家仔细看我的ID,有什么内涵? 3 没看出来就默念我的ID 十遍,然后结合我的头像一起看!! 4 好了,你继续往楼下看吧,我就是来混脸熟的。

回复 支持 反对 使用道具
举报
盲色.

发表于 02-08 09:14 显示全部楼层

支持!支持!!

回复 支持 反对 使用道具
举报
龙天哥

发表于 02-08 07:36 显示全部楼层

好文章,必须帮顶!!!

回复 支持 反对 使用道具
举报
百变小辉辉

发表于 02-08 04:49 显示全部楼层

为了学币每天必水一下,望见谅

回复 支持 反对 使用道具
举报
我不想静静

发表于 02-08 02:06 显示全部楼层

前排支持!!

回复 支持 反对 使用道具
举报
莨上指

发表于 02-08 01:52 显示全部楼层

楼主再见

回复 支持 反对 使用道具
举报
123下一页

发表新文章
叶建华老师

小码哥名师团队

0

学分

109

学币

167

积分

小码哥名师团队

Rank: 5Rank: 5

积分
167
Ta的主页 发消息
精华帖排行榜

精彩推荐

  • 关注小码哥教育