react-native介绍.pdf

React-Native 介绍 A FRAMEWORK FOR BUILDING NATIVE APPS USING REACT 黄健@内部工具研发组 Topic 1.  react-native的诞生 2.  react-native的开发与实践 3.  react-native的延伸与思考 4.  4. Q A 1.  react-native的诞生 1.1 移动app的主要几种开发模式 Web App(⺴⻚应⽤) Hybrid App(混合应⽤) Native App(原⽣应⽤) 开发成本 低 中 ⾼ 维护更新 简单 简单 复杂 ⽤户体验 差 中 优 发版审核 不需要 需要(可做增量) 需要 安装部署 免安装 需安装(可做增量) 安装 跨平台性 优 优 差 1.2 移动app的开发带来的思考 1.  JS变得越来越快但是DOM却一直都很慢 ，有没有更好的解决 方案 ？ 2.  JS调用native的原生方法除了走bridge通信外是否还有更好的 实现 ？ 3.  移动端有如此众多成熟的组件库 ，能否直接复用 ？ 4.  CSS动画转场的丢帧和卡顿问题能解决吗 ？ 5.  每个移动平台都由自身的特性 ，一份代码跑通所有的平台是否 真的切实可行且具有较好的维护性 ？ 参考链接 ：为什么移动web移动程序很慢 ？ 1.3 React-native的诞生 react-native是facebook开源的一款跨平台UI开发框架 ，相对于其 他的hybrid的框架 ，其所面向的工作环境已经跳出了浏览器环境 ， 能做到既拥有原生native的交互体验 ，又能够保持web的高效与灵 活 ，因此发布起就引起了业内极大的关注 ，目前已经可支持iOS和 andorid两套平台。 1.4 React-native的开发特点 1.  React Native里面没有webview ，运行性能会更好 ； 2.  采用了类似css flexbox的布局理念完成页面布局 ； 3.  扩展性更强 ，Native端提供的是基本控件 ，JS可以自由组合 使用 ，前端工程师和客户端工程师各司其职 ； 4.  支持直接热更新和远程调试 ； 5.  能直接调用原生平台的动画效果 ，运动更流畅 ； 6.  尊重平台特性 ，不强求一份原生代码支持多个平台 1.5 React-native的开发模式 “Learn once, write anywhere” Web iOS Android Virtual DOM React (JS/JSX) 2. react-native的开发与实践 2.1 React-native的准备开发环境 1.  Nodejs ：react-native开发的基础工具包基于nodejs搭建 ， 推荐安装V12.02或更新的版本进行使用 ； 2.  原生开发环境 ：需要安装好ios sdk+xcode和android sdk进 行相关开发 ，可以用模拟器和真机调试等多种方式 ； 3.  Chrome ：基于chrome上安装react-native tools ，可做布局