ReactNative技术交流培训课件(ppt 37页).pptVIP

目录 * 移动app的主要几种开发模式 react-native的诞生 Web app (网页应用) Hybrid app (混合应用) Native App (原生应用) 开发成本 低 中 高 维护更新 简单 简单 复杂 用户体验 差 中 优 发版审核 不需要 需要（可做增量） 需要 安装部署 免安装 需要（可做增量） 安装 跨平台性 优 优 差 移动app的开发带来的思考 1.? JS变得越来越快但是DOM却一直都很慢，有没有更好的解决方案？? 2.? JS调用native的原生方法除了走bridge通信外是否还有更好的实现？? 3.? 移动端有如此众多成熟的组件库，能否直接复用？? 4.? CSS动画转场的丢帧和卡顿问题能解决吗？ 5.? 每个移动平台都由自身的特性，一份代码跑通所有的平台是否?真的切实可行且具有较好的维护性？ React-native的开发特点 1.? React Native里面没有webview，运行性能会更好； 2.? 采用了类似css flexbox的布局理念完成页面布局； 3.? 扩展性更强，Native端提供的是基本控件，JS可以自 由组合使用，前端工程师和客户端工程师各司其职； 4.? 支持直接热更新和远程调试； 5.? 能直接调用原生平台的动画效果，运动更流畅； 6.? 尊重平台特性，不强求一份原生代码支持多个平台  React-native的开发模式 “Learn once, write anywhere” Web/ ios android Virtual Dom React(JS/JSX) React-native开发环境、调试、IDE 1.? Nodejs：react-native开发的基础工具包基于nodejs搭建， 2.? 原生开发环境：需要安装好ios sdk+xcode和android sdk进 行相关开发，可以用模拟器和真机调试等多种方式； 3.? Chrome：基于chrome上安装react-native tools，可做布局效果预览和代码断点调试； 4.? IDE：推荐使用atom，能非常方便的集成各种工具，同时语法检测和智能提醒也很完备 react native 项目构建 1.react-native init AwesomeProject； 2. 安装chrome调试插件：React Developer Tools； 3.Win系统下，andorid需要执行：react-native run-android 启动运行 4. MAC系统下， Xcode 中打开 ios/AwesomeProject.xcodeproj 启动运行 5. 在文本编辑器中打开 index.js 并且编辑代码； 6. 在安卓模拟器中按R两次重新加载应用程序并且观察发生的变化； 7.在 iOS 模拟器中按 ?-R 重新加载应用程序并且观察发生的变化； react native 需要掌握 Javascript基础 ES6语法 【箭头函数、Promise 】 React基础/JSX语法 【JSX有点像XML与HTML的混合】 Flexbox布局 Flux思想，Redux作为业务/数据框架 【单项数据流】 第三方类库 ES6特性 Promise异步 开发布局：Flexbox flex布局详解 react-native项目的工程结构分析-1 react-native项目的工程结构分析-2 react-native项目的工程结构分析-3 react-native项目的调试 React native 生命周期 react-native中的通信机制 MVC的架构实现 经典的MVC结构由Model（模型）、View（视图）和 Controller（控制）层构成，着重解决软件设计分层的问题。 MVC带来的问题 MVC模型只是确定了单向通信，但并没有清晰的规定数据流向，这将导致非常容易出现各种数据流向不一致的问题，有时各种数据的变化也会引起各种连锁变化，这都会导致使得数据流的控制变得极其困难。 Flux开发模式 通过严格的控制数据的更新来实现单向数据流，强调数据自上而下传递的单向流动理念，从而更清晰的掌握数据的改变方式及相应功能的位置。 目录 * React-native的简单例子 React-native的综合例子 APP例子思路与核心代码 1.APP需求假设：分类展现各种微信公众号优秀文章 2：数据源：爬取微信公众号内容(python抓取)，并编写JSON接口（PHP实现）供APP调用。 3. APP展现采用React-native技术。 4：用到的第三方：导航：react-navigation、数据存储：react-native-simple