Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JSDC 2015 React-Native 實戰

1,511 views

Published on

share how to integrate react-native with existing iOS & Android App

Published in: Software
  • Be the first to comment

JSDC 2015 React-Native 實戰

  1. 1. React-Native 實戰 融合現有 iOS App Sam Lee
  2. 2. Sam Lee 現職 : 趨勢科技 FED 熱衷 : 前端 / 後端 技術 淺草籤 作者 Email: lee.orz@gmail.com
  3. 3. Agenda • Why React-Native • 實戰 • Demo
  4. 4. Why React-Native ?
  5. 5. 問 題 • UI 變化的很快 • iOS / Android 的 UI 無法共⽤用 • 上架時間⻑⾧長 (Review時間) • 線上修正 Bug 相對困難
  6. 6. WebView的難處 • 效能不佳 • 相容性問題 • 離線問題
  7. 7. 站在巨⼈人肩膀!
  8. 8. 跨平台開發⼯工具 ⼯工具 React-Native PhoneGap/ Cordova Appcelerator Xamarin Corona 語⾔言 Javascript, JSX, CSS HTML5,CSS, Javascript Javascript .NET .NET 輸出 Native Webview + Native Native Native Native 速度 快 慢 快 快 快 學習難度 低 低 中 ⾼高 ⾼高 相容性 iOS/Android iOS/Android iOS/Android iOS/ Android iOS/ Android
  9. 9. 跨平台開發⼯工具 ⼯工具 React-Native PhoneGap/ Cordova Appcelerator Xamarin Corona 語⾔言 Javascript, JSX, CSS HTML5,CSS, Javascript Javascript .NET .NET 輸出 Native Webview + Native Native Native Native 速度 快 慢 快 快 快 學習難度 低 低 中 ⾼高 ⾼高 相容性 iOS/Android iOS/Android iOS/Android iOS/ Android iOS/ Android
  10. 10. 跨平台開發⼯工具 ⼯工具 React-Native PhoneGap/ Cordova Appcelerator Xamarin Corona 語⾔言 Javascript, JSX, CSS HTML5,CSS, Javascript Javascript .NET .NET 輸出 Native Webview + Native Native Native Native 速度 快 慢 快 快 快 學習難度 低 低 中 ⾼高 ⾼高 相容性 iOS/Android iOS/Android iOS/Android iOS/ Android iOS/ Android
  11. 11. react-native init YourProject
  12. 12. 熟悉的 React Index.ios.js
  13. 13. 產⽣生 JSBundle File
  14. 14. Cmd + R = Reload
  15. 15. Cmd + D = Debug
  16. 16. Debug in Browser Live Reload!
  17. 17. 是不是 Webview?
  18. 18. 繼承 UIView 不是 UIWebView !
  19. 19. JavaScriptCore iOS7+
  20. 20. 翻譯⽶米糕!!!!!!!
  21. 21. ReactJS JavascriptCore RCTBridge Native
 Method Javascript Bridge Obj-C bridge
  22. 22. 要如何跟現有App 整 合?
  23. 23. 主畫⾯面 Thumb
 View TableVie Thumb
 View Thumb
 View Thumb
 View Thumb
 View Thumb
 View React 
 ⺫⽬目標
  24. 24. ????????
  25. 25. 三 步 驟 • 在現有App 安裝 React-Native (CocoaPods) • 把 React Native View (RCTRootView) 放進現有 App • 準備 index.ios.js (iOS)
  26. 26. 遇到的問題 • 把 React Native View (RCTRootView) 放進現有 App
  27. 27.
  28. 28. 沒那麼簡單, 就能替換 
 別的全不看...
  29. 29. 原⽣生的 TableView 宣告
  30. 30. 取代成 RCTRootView
  31. 31. ReactJS JavascriptCore RCTBridge Native
 Method Javascript Bridge Obj-C bridge
  32. 32. 三 步 驟 Create Module Import
 RCTBridgeModule Export 
 Method
  33. 33. 遇到的問題 Export 
 Method
  34. 34. Index.ios.js 開始刻 React-Native UI
  35. 35. 取得跟 Native module ReactAPI 的接⼝口
  36. 36. 透過 ReactAPI module 呼叫 Native Function
  37. 37. Render出 ListView
  38. 38. 安裝
 React-Native ReactJS File React-Native
 View 融 合!!
  39. 39. 完成!!!
  40. 40. Demo Time…
  41. 41. 感 想
  42. 42. 徹底擺脫WebView • 解決了效能跟兼容性的問題 • Component 的設計, 所以元件可以⾃自由組合使⽤用 • 可以使⽤用原⽣生的 Animation • 跟 WebView ⼀一樣可以在線更新
  43. 43. Learn once , Write anywhere.
  44. 44. 挑 戰 / 疑 慮 • 從 Web 轉到 Native 觀念的不同 • Appstore 的政策是否會改變 • 低階機型的效能問題 • Upgrade 的問題 • iOS6 無法使⽤用 (這會隨時間消逝)
  45. 45. 關於 Android
  46. 46. Demo 2
 iOS & Android
  47. 47. Q & A
  48. 48. 四 步 驟 • 新增 
 compile ‘com.facebook.react:react-native:0.11+’ 
 到 build.gradle 中的 dependencies 區塊 • 在 AndroidManifest.xml 中加⼊入 
 <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" /> • 參考 
 https://gist.github.com/corbt/7cf2f0282a8936122c28
 把 View 放進 Android ! • Follow React-Native 官網的 
 GUILDS (ANDROID) -> Native Modules
 https://facebook.github.io/react-native/docs/native-modules- android.html#content

  49. 49. 謝 謝
  50. 50. Links • React-Native : 
 https://facebook.github.io/react-native/ • Integrating React Native with an Existing App:
 https://corbt.com/posts/2015/09/18/integrating- react-native-with-an-existing-app.html • Put your React-Native View to Android: 
 https://gist.github.com/corbt/ 7cf2f0282a8936122c28

×