Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ReactNative 探索之路

David Zhang
September 02, 2016

ReactNative 探索之路

来自 Dengxi (@regrex)

David Zhang

September 02, 2016
Tweet

More Decks by David Zhang

Other Decks in Programming

Transcript

  1. 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
  2. React Native基本元素 ListView View ScrollView TextInput TouchableHighlight … UITableView UIView

    UIScrollView UITextField UIButton … React Native lib Cocoa Touch
  3. 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、封装调用、事件响应
  4. 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
  5. React Native社区活跃度 • star: 37k+ • fork: 8k+ • component:

    500+ https://js.coach/react-native React Native: A year in review
  6. 测试 • Jest Tests(JS-only) • 单元测试(buckbuild) • 集成测试(buckbuild with Android

    SDK+NDK) • iOS有Snapshot Tests ဳғJestฎचԭJasmine҅य़᮱ړAPIฎ᭗አጱ
  7. 面临的问题 • 版本支持度:Android 4.1+、iOS 7.0+ • 性能在高低端机型上呈两极 • 部分非常用组件存在平台差异 •

    项目不成熟,版本不稳定,官方文档较少 • 对开发者的综合能力要求较高 • Web端SEO劣势
  8. 构建React Native生态 ୏რ ୏ݎ ᧣ᦶ ၥᦶ ݎ૲ ࢧ჻ ፊഴ ս۸

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