React-Native 入坑
App开发现状
-
多端团队人员成本
-
开发以及测试效率
-
多端代码复用差
-
App版本更新
-
……
React-Native
React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件,代替 DOM 元素来渲染等。
-
多平台开发
-
复用代码(官方称80%以上)
-
热更新
-
与原生模块对接,方便与原生项目整合,原生代码可以实现高级功能(RN暂实现不佳功能)
-
尽量不改变原生平台用户体验
-
基于 React 组件化开发,可重用组件和工具库,提高开发效率
-
采用 ES 标准特性
-
Chrome 调试
-
版本更新快,RN 论坛活跃
React Native环境与原理
React Native运行环境:
1. 运行需要JS环境
2. iOS平台:内置JavaScriptCore
3. Android平台:采用Webkit.org官方开源的库。同时还集成了第三方开源库: fresco,okhttp
React Native 会把应用的 JS 代码(包括依赖的 framework )编译成一个js文件(一般命名为index.android.bundle), React Native进行解释运行该脚本文件:
1. 如果是 js 扩展的 API, 则直接通过 bridge调用 native 方法;
2. 如果是 UI 界面,则映射到 virtual DOM 这个虚拟的 JS 数据结构中,通过 bridge 传递到 native ,然后根据数据属性设置各个对应的真实native的View。
3. bridge 是一种 JS 和 JAVA 代码通信的机制,用 bridge 函数传入对方 module 和 method 即可得到异步回调的结果。
React Native环境与原理
React Native缺点
- 还未出正式版,版本更新快
- 组件库还不完善
- 版本支持: iOS 最低 7.0 ,Android 最低 4.1
- 暂无强大 IDE
- Windows 开发坑多...
学习 RN
- Android开发,java
- iOS开发,OC
- JavaScript
- React-Native框架
- Redux
- Flexbox
- ES6
学习路线:
1. Hello World !
2. 熟悉项目文件结构
3. 认识组件(通用的,Android,iOS)
4. 认识布局 Flexbox
5. 学习 JS 语法,了解 ES6 特性
6. 网络操作
7. 数据存储
8. 与原生组件通信
9. 打包发布
10. 热更新
11. 拥抱开源...
更多
React-Native
By Hanks
React-Native
- 9,116