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

1. React-Native 實戰
融合現有 iOS App
Sam Lee

2. Sam Lee
現職 : 趨勢科技 FED
熱衷 : 前端 / 後端 技術
淺草籤 作者
Email: lee.orz@gmail.com

3. Agenda
• Why React-Native
• 實戰
• Demo

4. Why React-Native ?

5. 問 題
• UI 變化的很快
• iOS / Android 的 UI 無法共⽤用
• 上架時間⻑⾧長 (Review時間)
• 線上修正 Bug 相對困難

6. WebView的難處
• 效能不佳
• 相容性問題
• 離線問題

7. 站在巨⼈人肩膀!

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. 跨平台開發⼯工具
⼯工具 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. 跨平台開發⼯工具
⼯工具 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. react-native init YourProject

12. 熟悉的 React
Index.ios.js

13. 產⽣生 JSBundle File

14. Cmd + R = Reload

15. Cmd + D = Debug

16. Debug in Browser
Live Reload!

17. 是不是 Webview?

20. 繼承 UIView 不是 UIWebView !

21. JavaScriptCore
iOS7+

22. 翻譯⽶米糕!!!!!!!

23. ReactJS JavascriptCore
RCTBridge
Native
Method
Javascript Bridge
Obj-C bridge

24. 要如何跟現有App 整
合？

25. 主畫⾯面
Thumb
View
TableVie
Thumb
View
Thumb
View
Thumb
View
Thumb
View
Thumb
View
React
⺫⽬目標

26. ????????

27. 三 步 驟
• 在現有App 安裝 React-Native (CocoaPods)
• 把 React Native View (RCTRootView) 放進現有 App
• 準備 index.ios.js (iOS)

28. 遇到的問題
• 把 React Native View (RCTRootView) 放進現有 App

29. 嚇

30. 沒那麼簡單, 就能替換
別的全不看...

31. 原⽣生的 TableView 宣告

32. 取代成 RCTRootView

36. ReactJS JavascriptCore
RCTBridge
Native
Method
Javascript Bridge
Obj-C bridge

37. 三 步 驟
Create
Module
Import
RCTBridgeModule
Export
Method

38. 遇到的問題
Export
Method

39. Index.ios.js
開始刻 React-Native UI

41. 取得跟 Native module ReactAPI 的接⼝口

42. 透過 ReactAPI module 呼叫 Native Function

43. Render出 ListView

44. 安裝
React-Native
ReactJS File
React-Native
View
融 合!!

45. 完成!!!

46. Demo Time…

47. 感 想

48. 徹底擺脫WebView
• 解決了效能跟兼容性的問題
• Component 的設計, 所以元件可以⾃自由組合使⽤用
• 可以使⽤用原⽣生的 Animation
• 跟 WebView ⼀一樣可以在線更新

49. Learn once , Write
anywhere.

50. 挑 戰 / 疑 慮
• 從 Web 轉到 Native 觀念的不同
• Appstore 的政策是否會改變
• 低階機型的效能問題
• Upgrade 的問題
• iOS6 無法使⽤用 (這會隨時間消逝)

51. 關於 Android

52. Demo 2
iOS & Android

53. Q & A

54. 四 步 驟
• 新增
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

55. 謝 謝

56. 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