React-Native 入坑

App开发现状

 

  1. 多端团队人员成本

  2. 开发以及测试效率

  3. 多端代码复用差

  4. App版本更新

  5. ……

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. 拥抱开源...

 

 

更多