React Native探索之路

2020-02-27 288浏览

  • 1.React Native探索之路 dengxi@baidu.com
  • 2.Content • React Native • React Native • React Native • Demo •
  • 3.React Native简介 • 概览 • 开发环境 • 技术构成 • 社区生态
  • 4.React Native概览 Android Native UI iOS Native UI Layout Compiler & RTC Bridge React Virtual DOM System React Component Shared JS Logic Code LEARN ONCE, WRITE ANYWHERE BUILD MOBILE APPS WITH REACT
  • 5.React Native开发环境
  • 6.React Native技术构成 • 基本元素 • UI更新逻辑 • 通信机制 • 布局机制
  • 7.React Native基本元素 React Native lib ListView View ScrollView TextInput UITableView UIView UIScrollView UITextField Cocoa Touch TouchableHighlight … … UIButton
  • 8.React Native UI更新逻辑 React DOM diff算法
  • 9.React Native通信机制 • OC • OC • Java RCT_CUSTOM_VIEW_PROPERTY RN props RCT_EXPORT_MODULE RCT_EXPORT_METHOD RN @ReactProp @ReactPropGroup set RN React Native Native • Native RTCBridge • RCTEventDispatcher JS JS 模块化、模块配置表、传递ID、封装调用、事件响应 React Native
  • 10.React Native布局机制 Flex Container Cross Start Flex Item Cross Axis Flex Item Flex Item Cross Size Main Size Main Start Cross End Flex box Main Axis Main End Autolayout
  • 11.React Native社区生态 • 社区活跃度 • 谁在用React Native
  • 12.React Native社区活跃度 •star:37k+ •fork:8k+ •component:500+ ReactNative:A year in reviewhttps://js.coach/react-native
  • 13.谁在用React NativeApps:100+ showcase
  • 14.Content • React Native • React Native • React Native • Demo •
  • 15.选择React Native？ • 开发成本 • 对比其他方案 • 医疗业务应用场景
  • 16.React Native开发成本 RN ≈ (Android + iOS + Web) / 2
  • 17.对比其他方案 H5、React Native、Native应用对比分析
  • 18.医疗业务应用场景 • App中频繁迭代部分：如医疗服务 • 新App开发：如医院版
  • 19.Content • React Native • React Native • React Native • Demo •
  • 20.如何应用React Native • 开发 • 联调 • 测试 • 发布
  • 21.开发 • 环境搭建 • 知识储备 • 代码调试
  • 22.联调 • 与server联调 • 植入原生应用
  • 23.与server联调 fetch('http://api.baidu.com/path?params')// web api .then( response => response.json() ) .then( json => { // }) .catch(error => // ); 比XMLHttpRequest更先进的WebAPI，支持Promise
  • 24.植入原生应用 1. 通过CocoaPods安装React Native 2. 创建继承自UIView的ReactView应用类 iOS 3. 通过RN的index.ios.bundle来初始化RCTRootView 4. 添加ReactView为rootView的子视图 5. 更新App Transport Security（http支持） 6. 编译运行
  • 25.植入原生应用 1. build.gradle添加React Native依赖 Android 2. 创建实现ReactRootView的原生Activity 3. 获取index.android.bundle文件 4. 关联index.android.js里的React Native应用 5. 构建Android应用
  • 26.测试 • Jest Tests（JS-only） • 单元测试（buckbuild） • 集成测试（buckbuild with Android SDK+NDK） • iOS有Snapshot Tests Jest Jasmine API
  • 27.发布 • CodePush类服务（操作简单，但是需要APP继承SDK） • 自己搭建部署服务（iCode+Agile+ORP）
  • 28.Content • React Native • React Native • React Native • Demo •
  • 29.Demo演示 iOS
  • 30.Demo演示 Android
  • 31.Demo演示 Web
  • 32.Demo资料 • msbu-react group • 上线bundle • babel静态资源处理插件
  • 33.一些坑 • Android中Android SDK Build-Tools V23.0.1限制 • 三端同构产出内容需要微调抹平（如flex布局元素height） • 产出bundle内容处理（自写babel插件替换资源路径） • 等等，其实还有很多，宝宝突然懵圈想不起来了
  • 34.Content • React Native • React Native • React Native • Demo •
  • 35.风险及挑战 • 面临的问题及处理办法 • 构建React Native生态
  • 36.面临的问题 • 版本支持度：Android 4.1+、iOS 7.0+ • 性能在高低端机型上呈两极 • 部分非常用组件存在平台差异 • 项目不成熟，版本不稳定，官方文档较少 • 对开发者的综合能力要求较高 • Web端SEO劣势
  • 37.处理办法 • 版本支持度：目前App的兼容范围Cover，低版本降级处理 • 低端机性能：低端机型提供核心功能降级Web版本 • 平台性差异：搭建组件库，抹平差异 • 项目不成熟：自建生态，保持对社区的敏锐嗅觉 • 开发者能力：提供整套开发解决方案，降低研发成本 • Web端SEO：服务器端渲染
  • 38.构建React Native生态 DEMO/ / App Chrome Developer Tools MVP ORP web Web
  • 39.React Native资料 • facebook-react-native • awesome-react-native • react & redux
  • 40.Q&A