专栏首页彭湖湾的编程世界当React开发者初次走进React-Native的世界

当React开发者初次走进React-Native的世界

RN千机变

1.技术体系问题

RN和React共用一套抽象层,相对于前端,RN其实更接近Node的运行环境

ReactNative =React +IOS +Android

看RN文档时,我会发现入门基础那一块介绍的都是React的内容,进阶篇则介绍了很多IOS和Android的API

2.组件设计问题

Android和IOS一些设计组件是不共通的,这意味着,原本在React上只返回一个组件的情况下,RN中你可能需要判断平台分别返回两个版本的组件,为什么要这样? 因为对于许多组件,两个平台的风格差异实在太大,只能分而治之。

3.静态资源问题

RN应用和普通Web应用有一些天生的差别,RN应用是可以植入预定的静态资源的,也就是不需要经过任何一次请求,而都可以本地使用的静态资源,而Web应用试图使用这种资源则需要经过至少一次的网络请求并且缓存,但仍有可能被用户强清缓存等操作付之一炬。

这意味着,做性能优化时也许可以从静态资源入手了,我阅读了以下文章后 探索 react native 首屏渲染最佳实践

学习到了可以通过静态文件占位图优化RN首屏的新思路。当然,很多时候React和RN的优化思路也是共通的,例如

  • 资源预先缓存
  • 长列表延迟加载等等

4.标签生效问题

  • <div>不能用啦,要用<view>
  • <p>标签用不了啦,要用<Text>
  • 没有<img>了,取而代之的是<Image>
  • 背景,可以用ImageBackground这个组件
  • 列表,不能用ul/li啦,用ListView组件吧兄弟
  • 各种Input,不能用input标签啦~ 要用对应的原生控件,比如TextInput、Picker、Switch、Slider

5.事件核心问题

Web开发中,点击事件是核心,而在主攻移动端的RN中,触摸事件的地位则大大增强,而且除此之外,还衍生了长按事件(JS中我记得只有双击事件没有长按事件)

  • onPressOut等等
  • onLongPress 等等

6.CSS3属性受限,动画效果使用方式完全变更

CSS/Animation我用不了了,因为CSS已经没了了,底层是用bridge调原生的UI构建

7.虚拟DOM到虚拟View的演变

在React中,我们使用虚拟DOM模拟现实中的DOM节点

在RN中,这个对象被换成了虚拟View,对应原生平台中的视图,因为RN中已经没有DOM了

8.UI呈现的变化

(以下参考自: http://blog.ilibrary.me/2016/12/25/react-native-internal)

UI的描述和呈现分离开了。

  1. html文本描述了页面应该有哪些功能,css告诉浏览器该长什么样。
  2. 浏览器引擎通过解析html和css,翻译成一些列的预定义UI控件,
  3. 然后UI控件去调用操作系统绘图指令去绘制图像展现给用户。
  4. Javascript可有可无,主要用于html里面一些用户事件响应,DOM操作、异步网络请求和一些简单的计算。

在react native 里面,1和2是不变的,也是用html语言描述页面有哪些功能,然后stylesheet告诉浏览器引擎每个控件应该长什么样。并且和浏览器用的是同一个引擎。 在步骤3里面UI控件不再是浏览器内置的控件,而是react native自己实现的一套UI控件(两套,android一套,ios一套),这个切换是在MessageQueque中进行的,并且还可以发现,他们tag也是不一样的。参考链接:http://blog.ilibrary.me/2016/12/25/react-native-internal

RN大观园

  1. IOS9只支持https,以http加载网络图片资源是无效的
  2. React-native内置babel转换器和ES6的polypill
  3. RN使用的引擎是safari的引擎而我们一般调试的时候用的是Chrome的V8引擎
  4. 遇到频繁修改属性的场景,为了避免影响性能,建议使用setNativeProp直接修改属性,而不是走setState的流程
  5. 测试元素和包裹容器的距离,在普通场景中我们可能会考虑scrolltop,offsetTop等一堆属性,在RN中可以通过一个方法,叫measure和measureLayOut,能分别测以某个元素为参考点的相对位置和绝对位置
  6. RN相对于普通web应用,增加了一个属性叫hsl,可以指定:色度-饱和度-亮度,是不是感觉和rgba很类似的作用呀
  7. 如果访问的一些API,但是RN平台暂时没有做封装,就需要自己用Object-C或者Android实现
  8. 数据库: RN是移动端应用,那不就意味着可以用Android等的数据库或者文件系统了吗? 在RN中这似乎被封装成了AsyncStroage,如果觉得API还不能满足的话,可以用社区里的一个高性能的RN库——realm
  9. 后台任务可以很方便的用了,就像web-worker一样
  10. 编写跨平台代码时候,RN专门提供了Platform对
  11. Plaform.OS: 返回平台名称,比如iOS或者android
  • Plaform.Version: 返回版本
  • Plaform.select: 方法,接收一个对象,可以分别指定ios和android环境下的返回值,酌情返回

12.导航有提供专门的模块:比如react-navigation和react-native-navigation

13.动画要用Animated控件,不能自己写CSS3的动画属性了,比如Animation和transition

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 浅谈设计模式(一):状态模式|外观模式|代理模式

    在状态模式的设计方案里,一个主类(称为context类),可以在内部状态变化的时候一次性改变它的「所有行为」,而这个「所有行为」会被我们聚合到不同的类(stat...

    外婆的彭湖湾
  • 【Java】泛型学习笔记

    我的博客即将入驻“云栖社区”,诚邀技术同仁一同入驻。 参考书籍 《Java核心技术:卷1》 泛型, 先睹为快 先通过一个简单的例子说明下Java中泛型的用法: ...

    外婆的彭湖湾
  • 【Vue】详解Vue生命周期

    Vue实例的生命周期全过程(图) ? (这里的红边圆角矩形内的都是对应的Vue实例的钩子函数) 在beforeCreate和created钩子函数间的生命周期...

    外婆的彭湖湾
  • React Native Upgrade

    文中的代码和图片我都反复检查过了,基本上没有泄露公司的重要信息的数据,如若发现有泄露的话请立即告知我 ;-)

    宅男潇涧
  • React Native 在卖菜公司的落地之路

    内容来源:2018 年 3 月 31 日,宋小菜资深前端工程师陈锦辉在“React 技术专场交流活动”进行《RN 在卖菜公司的落地之路》演讲分享。IT 大咖说(...

    IT大咖说
  • css3过渡与动画

    过渡 当触发的时候会有过渡的效果 1.transition-property:none|all|某一个属性值 2.transition-duration:...

    河湾欢儿
  • SpringBoot2.0 基础案例(03):配置系统全局异常映射处理

    业务异常主要是一些可预见性异常,处理业务异常,用来提示用户的操作,提高系统的可操作性。

    知了一笑
  • 看我如何定位骗子,找出幕后诈骗的黑手(上)

    临近年末,很多诈骗犯已经跃跃欲试了,用各种套路来坑你的血汗钱,所以我们要用所学到的东西来保护自己,其实I春秋社区有一个神秘的讨论组,每天就是抓骗子,帮妖妖灵的蜀...

    HACK学习
  • dotnet 设计规范 · 数组定义

    X 不建议设置数组类型的字段为只读。虽然用户不能修改字段,但是可以修改字段里面的元素。如果需要一个只读的集合,建议定义为只读集合。

    林德熙
  • DAO 设计模式

    客户发送数据到显示层,显示层发送数据到业务层,业务发送数据到数据层,数据层进行持久化.即.保存进入databases

    mySoul

扫码关注云+社区

领取腾讯云代金券