Tweet
Tweet

Slide 1

Slide 1 text

React Native探索之路 [email protected]

Slide 2

Slide 2 text

Content • React Native ᓌՕ • ᭌೠReact NativeҘ • ই֜ଫአReact NativeҘ • Demoᄍᐏ • ᷚᴾ݊೴౴

Slide 3

Slide 3 text

React Native简介 • 概览 • 开发环境 • 技术构成 • 社区生态

Slide 4

Slide 4 text

React Native概览 LEARN ONCE, WRITE ANYWHERE BUILD MOBILE APPS WITH REACT Shared JS Logic Code React Component React Virtual DOM System Layout Compiler & RTC Bridge Android Native UI iOS Native UI

Slide 5

Slide 5 text

React Native开发环境

Slide 6

Slide 6 text

React Native技术构成 • 基本元素 • UI更新逻辑 • 通信机制 • 布局机制

Slide 7

Slide 7 text

React Native基本元素 ListView View ScrollView TextInput TouchableHighlight … UITableView UIView UIScrollView UITextField UIButton … React Native lib Cocoa Touch

Slide 8

Slide 8 text

React Native UI更新逻辑 React DOM diff算法

Slide 9

Slide 9 text

React Native通信机制 React Native Native • OC᭗ᬦRCT_CUSTOM_VIEW_PROPERTYਡูᶂં௔کRNጱprops᯾ • OC᭗ᬦRCT_EXPORT_MODULE޾RCT_EXPORT_METHODਡูᶂᕳRN᯾ • Java᭗ᬦ@ReactProp౲@ReactPropGroupဳ᯽๶੕ڊં௔ጱsetොဩ׀RN • Native᭗ᬦRTCBridge൉׀ጱJSཛྷࣘොဩፗളᦢᳯ • ᭗ᬦRCTEventDispatcherզݎᭆ޾ളතၾ௳ጱොୗਫሿ᧣አҁJSጱߥଫࢧ᧣ڍහ҂ React Native᭗מ๢ګᧇᥴ 模块化、模块配置表、传递ID、封装调用、事件响应

Slide 10

Slide 10 text

Flex box Flex Container Flex Item Flex Item Flex Item Cross Axis Main Axis Cross Size Main Size Autolayout React Native布局机制 Cross Start Cross End Main Start Main End

Slide 11

Slide 11 text

React Native社区生态 • 社区活跃度 • 谁在用React Native

Slide 12

Slide 12 text

React Native社区活跃度 • star: 37k+ • fork: 8k+ • component: 500+ https://js.coach/react-native React Native: A year in review

Slide 13

Slide 13 text

谁在用React Native Apps: 100+ showcase

Slide 14

Slide 14 text

Content • React Native ᓌՕ • ᭌೠReact NativeҘ • ই֜ଫአReact NativeҘ • Demoᄍᐏ • ᷚᴾ݊೴౴

Slide 15

Slide 15 text

选择React Native？ • 开发成本 • 对比其他方案 • 医疗业务应用场景

Slide 16

Slide 16 text

React Native开发成本 RN ≈ (Android + iOS + Web) / 2 ӣොᦡᦇӞᛘ

Slide 17

Slide 17 text

对比其他方案 H5、React Native、Native应用对比分析

Slide 18

Slide 18 text

医疗业务应用场景 • App中频繁迭代部分：如医疗服务 • 新App开发：如医院版

Slide 19

Slide 19 text

Content • React Native ᓌՕ • ᭌೠReact NativeҘ • ই֜ଫአReact NativeҘ • Demoᄍᐏ • ᷚᴾ݊೴౴

Slide 20

Slide 20 text

如何应用React Native • 开发 • 联调 • 测试 • 发布

Slide 21

Slide 21 text

开发 • 环境搭建 • 知识储备 • 代码调试

Slide 22

Slide 22 text

联调 • 与server联调 • 植入原生应用

Slide 23

Slide 23 text

与server联调 比XMLHttpRequest更先进的WebAPI，支持Promise fetch('http://api.baidu.com/path?params') // web api .then( response => response.json() ) .then( json => { // ྋଉߥଫ॒ቘ᭦ᬋ }) .catch(error => // ୑ଉ॒ቘ᭦ᬋ );

Slide 24

Slide 24 text

植入原生应用 1. 通过CocoaPods安装React Native 2. 创建继承自UIView的ReactView应用类 3. 通过RN的index.ios.bundle来初始化RCTRootView 4. 添加ReactView为rootView的子视图 5. 更新App Transport Security（http支持） 6. 编译运行 iOS

Slide 25

Slide 25 text

植入原生应用 1. build.gradle添加React Native依赖 2. 创建实现ReactRootView的原生Activity 3. 获取index.android.bundle文件 4. 关联index.android.js里的React Native应用 5. 构建Android应用 Android

Slide 26

Slide 26 text

测试 • Jest Tests（JS-only） • 单元测试（buckbuild） • 集成测试（buckbuild with Android SDK+NDK） • iOS有Snapshot Tests ဳғJestฎचԭJasmine҅य़᮱ړAPIฎ᭗አጱ

Slide 27

Slide 27 text

发布 • CodePush类服务（操作简单，但是需要APP继承SDK） • 自己搭建部署服务（iCode+Agile+ORP）

Slide 28

Slide 28 text

Content • React Native ᓌՕ • ᭌೠReact NativeҘ • ই֜ଫአReact NativeҘ • Demoᄍᐏ • ᷚᴾ݊೴౴

Slide 29

Slide 29 text

Demo演示 iOS

Slide 30

Slide 30 text

Demo演示 Android

Slide 31

Slide 31 text

Demo演示 Web

Slide 32

Slide 32 text

Demo资料 • msbu-react group • 上线bundle • babel静态资源处理插件

Slide 33

Slide 33 text

一些坑 • Android中Android SDK Build-Tools V23.0.1限制 • 三端同构产出内容需要微调抹平（如flex布局元素height） • 产出bundle内容处理（自写babel插件替换资源路径） • 等等，其实还有很多，宝宝突然懵圈想不起来了

Slide 34

Slide 34 text

Content • React Native ᓌՕ • ᭌೠReact NativeҘ • ই֜ଫአReact NativeҘ • Demoᄍᐏ • ᷚᴾ݊೴౴

Slide 35

Slide 35 text

风险及挑战 • 面临的问题及处理办法 • 构建React Native生态

Slide 36

Slide 36 text

面临的问题 • 版本支持度：Android 4.1+、iOS 7.0+ • 性能在高低端机型上呈两极 • 部分非常用组件存在平台差异 • 项目不成熟，版本不稳定，官方文档较少 • 对开发者的综合能力要求较高 • Web端SEO劣势

Slide 37

Slide 37 text

处理办法 • 版本支持度：目前App的兼容范围Cover，低版本降级处理 • 低端机性能：低端机型提供核心功能降级Web版本 • 平台性差异：搭建组件库，抹平差异 • 项目不成熟：自建生态，保持对社区的敏锐嗅觉 • 开发者能力：提供整套开发解决方案，降低研发成本 • Web端SEO：服务器端渲染

Slide 38

Slide 38 text

构建React Native生态 ୏რ ୏ݎ ᧣ᦶ ၥᦶ ݎ૲ ࢧ჻ ፊഴ ս۸ ୏ݎ֛ḵ̵ᗑᕶ๐ۓ ௔ᚆ̵አಁ֛ḵ ௔ᚆ̵Კ᧏̵አಁᤈԅ ୏ىഴګ̵ᴳᕆکweb ᛔᖫᦲ๢಑۱̵૧ړ຅ୌ̵ےੂ॒ቘ ORPӤᕚ̵Webᒒݶ຅Ӥᕚ ଉᥢ፥๢ၥᦶ MVPग़ᦡ॓ԯᒒၥᦶ Chrome Developer Tools ෭ப๢ګ̵ሾहڔഘ๢ګ ୏ݎሾह൫ୌ̵୏ݎᘏଘݣҁDEMO/෈໩/ᩒᦔ҂ ጯଶ܅ኞAppᵞ౮̵चᏐᕟկ݊ӱۓᕟկ ᐒ܄ᨯሠ̵݇Ө୏რ

Slide 39

Slide 39 text

React Native资料 • facebook-react-native • awesome-react-native • react & redux

Slide 40

Slide 40 text

Q&A