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 的描述和呈现分离开了.
html 文本描述了页面应该有哪些功能, CSS 告诉浏览器该长什么样.
浏览器引擎通过解析 HTML 和 CSS, 翻译成一些列的预定义 UI 控件,
然后 UI 控件去调用操作系统绘图指令去绘制图像展现给用户.
JavaScript 可有可无, 主要用于 HTML 里面一些用户事件响应, DOM 操作, 异步网络请求和一些简单的计算.
在 react native 里面, 1 和 2 是不变的, 也是用 HTML 语言描述页面有哪些功能, 然后 stylesheet 告诉浏览器引擎每个控件应该长什么样. 并且和浏览器用的是同一个引擎.
在步骤 3 里面 UI 控件不再是浏览器内置的控件, 而是 react native 自己实现的一套 UI 控件 (两套, Android 一套, iOS 一套), 这个切换是在 MessageQueque 中进行的, 并且还可以发现, 他们 tag 也是不一样的. 参考链接:
RN 大观园
IOS9 只支持 https, 以 http 加载网络图片资源是无效的
React-native 内置 babel 转换器和 ES6 的 polypill
RN 使用的引擎是 Safari 的引擎而我们一般调试的时候用的是 Chrome 的 V8 引擎
遇到频繁修改属性的场景, 为了避免影响性能, 建议使用 setNativeProp 直接修改属性, 而不是走 setState 的流程
测试元素和包裹容器的距离, 在普通场景中我们可能会考虑 scrolltop,offsetTop 等一堆属性, 在 RN 中可以通过一个方法, 叫 measure 和 measureLayOut, 能分别测以某个元素为参考点的相对位置和绝对位置
RN 相对于普通 Web 应用, 增加了一个属性叫 hsl, 可以指定: 色度 - 饱和度 - 亮度, 是不是感觉和 rgba 很类似的作用呀
如果访问的一些 API, 但是 RN 平台暂时没有做封装, 就需要自己用 Object-C 或者 Android 实现
数据库: RN 是移动端应用, 那不就意味着可以用 Android 等的数据库或者文件系统了吗? 在 RN 中这似乎被封装成了 AsyncStroage, 如果觉得 API 还不能满足的话, 可以用社区里的一个高性能的 RN 库 --realm
后台任务可以很方便的用了, 就像 Web-worker 一样
编写跨平台代码时候, RN 专门提供了 Platform 对
Plaform.OS: 返回平台名称, 比如 iOS 或者 Android
Plaform.Version: 返回版本
http://Plaform.select : 方法, 接收一个对象, 可以分别指定 iOS 和 Android 环境下的返回值, 酌情返回
12. 导航有提供专门的模块: 比如 react-navigation 和 react-native-navigation
13. 动画要用 Animated 控件, 不能自己写 CSS3 的动画属性了, 比如 Animation 和 transition
来源: https://www.cnblogs.com/penghuwan/p/11515692.html