ReactNative 探索之路

来自 Dengxi (@regrex)

Transcript

1. React Native探索之路 dengxi@baidu.com
2. Content • React Native ᓌՕ • ᭌೠReact NativeҘ • ই֜ଫአReact NativeҘ • Demoᄍᐏ • ᷚᴾ݊೴౴
3. React Native简介 • 概览 • 开发环境 • 技术构成 • 社区生态
4. 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
5. React Native开发环境
6. React Native技术构成 • 基本元素 • UI更新逻辑 • 通信机制 • 布局机制
7. React Native基本元素 ListView View ScrollView TextInput TouchableHighlight … UITableView UIView UIScrollView UITextField UIButton … React Native lib Cocoa Touch
8. React Native UI更新逻辑 React DOM diff算法
9. 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、封装调用、事件响应
10. 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
11. React Native社区生态 • 社区活跃度 • 谁在用React Native
12. React Native社区活跃度 • star: 37k+ • fork: 8k+ • component: 500+ https://js.coach/react-native React Native: A year in review
13. 谁在用React Native Apps: 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联调 比XMLHttpRequest更先进的WebAPI，支持Promise fetch('http://api.baidu.com/path?params') // web api .then( response => response.json() ) .then( json => { // ྋଉߥଫ॒ቘ᭦ᬋ }) .catch(error => // ୑ଉ॒ቘ᭦ᬋ );
24. 植入原生应用 1. 通过CocoaPods安装React Native 2. 创建继承自UIView的ReactView应用类 3. 通过RN的index.ios.bundle来初始化RCTRootView 4. 添加ReactView为rootView的子视图 5. 更新App Transport Security（http支持） 6. 编译运行 iOS
25. 植入原生应用 1. build.gradle添加React Native依赖 2. 创建实现ReactRootView的原生Activity 3. 获取index.android.bundle文件 4. 关联index.android.js里的React Native应用 5. 构建Android应用 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生态 ୏რ ୏ݎ ᧣ᦶ ၥᦶ ݎ૲ ࢧ჻ ፊഴ ս۸ ୏ݎ֛ḵ̵ᗑᕶ๐ۓ ௔ᚆ̵አಁ֛ḵ ௔ᚆ̵Კ᧏̵አಁᤈԅ ୏ىഴګ̵ᴳᕆکweb ᛔᖫᦲ๢಑۱̵૧ړ຅ୌ̵ےੂ॒ቘ ORPӤᕚ̵Webᒒݶ຅Ӥᕚ ଉᥢ፥๢ၥᦶ MVPग़ᦡ॓ԯᒒၥᦶ Chrome Developer Tools ෭ப๢ګ̵ሾहڔഘ๢ګ ୏ݎሾह൫ୌ̵୏ݎᘏଘݣҁDEMO/෈໩/ᩒᦔ҂ ጯଶ܅ኞAppᵞ౮̵चᏐᕟկ݊ӱۓᕟկ ᐒ܄ᨯሠ̵݇Ө୏რ
39. React Native资料 • facebook-react-native • awesome-react-native • react & redux
40. Q&A