jsdc 2015 react-native 實戰
TRANSCRIPT
![Page 1: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/1.jpg)
React-Native 實戰融合現有 iOS App
Sam Lee
![Page 3: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/3.jpg)
Agenda
• Why React-Native
• 實戰
• Demo
![Page 4: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/4.jpg)
Why React-Native ?
![Page 5: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/5.jpg)
問 題
• UI 變化的很快
• iOS / Android 的 UI 無法共⽤用
• 上架時間⻑⾧長 (Review時間)
• 線上修正 Bug 相對困難
![Page 6: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/6.jpg)
WebView的難處
• 效能不佳
• 相容性問題
• 離線問題
![Page 7: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/7.jpg)
站在巨⼈人肩膀!
![Page 8: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/8.jpg)
跨平台開發⼯工具⼯工具 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
![Page 9: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/9.jpg)
跨平台開發⼯工具⼯工具 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
![Page 10: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/10.jpg)
跨平台開發⼯工具⼯工具 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
![Page 11: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/11.jpg)
react-native init YourProject
![Page 12: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/12.jpg)
熟悉的 React
Index.ios.js
![Page 13: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/13.jpg)
產⽣生 JSBundle File
![Page 14: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/14.jpg)
Cmd + R = Reload
![Page 15: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/15.jpg)
Cmd + D = Debug
![Page 16: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/16.jpg)
Debug in Browser
Live Reload!
![Page 17: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/17.jpg)
是不是 Webview?
![Page 18: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/18.jpg)
![Page 19: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/19.jpg)
![Page 20: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/20.jpg)
繼承 UIView 不是 UIWebView !
![Page 21: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/21.jpg)
JavaScriptCoreiOS7+
![Page 22: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/22.jpg)
翻譯⽶米糕!!!!!!!
![Page 23: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/23.jpg)
ReactJS JavascriptCore
RCTBridge NativeMethod
Javascript Bridge
Obj-C bridge
![Page 24: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/24.jpg)
要如何跟現有App 整合?
![Page 25: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/25.jpg)
主畫⾯面
ThumbView
TableVie
ThumbView
ThumbView
ThumbView
ThumbView
ThumbView
React
⺫⽬目標
![Page 26: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/26.jpg)
????????
![Page 27: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/27.jpg)
三 步 驟
• 在現有App 安裝 React-Native (CocoaPods)
• 把 React Native View (RCTRootView) 放進現有 App
• 準備 index.ios.js (iOS)
![Page 28: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/28.jpg)
遇到的問題• 把 React Native View (RCTRootView) 放進現有 App
![Page 29: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/29.jpg)
嚇
![Page 30: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/30.jpg)
沒那麼簡單, 就能替換 別的全不看...
![Page 31: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/31.jpg)
原⽣生的 TableView 宣告
![Page 32: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/32.jpg)
取代成 RCTRootView
![Page 33: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/33.jpg)
![Page 34: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/34.jpg)
![Page 35: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/35.jpg)
![Page 36: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/36.jpg)
ReactJS JavascriptCore
RCTBridge NativeMethod
Javascript Bridge
Obj-C bridge
![Page 37: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/37.jpg)
三 步 驟Create Module
ImportRCTBridgeModule
Export Method
![Page 38: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/38.jpg)
遇到的問題Export Method
![Page 39: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/39.jpg)
Index.ios.js開始刻 React-Native UI
![Page 40: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/40.jpg)
![Page 41: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/41.jpg)
取得跟 Native module ReactAPI 的接⼝口
![Page 42: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/42.jpg)
透過 ReactAPI module 呼叫 Native Function
![Page 43: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/43.jpg)
Render出 ListView
![Page 44: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/44.jpg)
安裝React-Native
ReactJS File
React-Native View
融 合!!
![Page 45: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/45.jpg)
完成!!!
![Page 46: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/46.jpg)
Demo Time…
![Page 47: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/47.jpg)
感 想
![Page 48: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/48.jpg)
徹底擺脫WebView
• 解決了效能跟兼容性的問題
• Component 的設計, 所以元件可以⾃自由組合使⽤用
• 可以使⽤用原⽣生的 Animation
• 跟 WebView ⼀一樣可以在線更新
![Page 49: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/49.jpg)
Learn once , Write anywhere.
![Page 50: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/50.jpg)
挑 戰 / 疑 慮• 從 Web 轉到 Native 觀念的不同
• Appstore 的政策是否會改變
• 低階機型的效能問題
• Upgrade 的問題
• iOS6 無法使⽤用 (這會隨時間消逝)
![Page 51: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/51.jpg)
關於 Android
![Page 52: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/52.jpg)
Demo 2 iOS & Android
![Page 53: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/53.jpg)
Q & A
![Page 54: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/54.jpg)
四 步 驟• 新增
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
![Page 55: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/55.jpg)
謝 謝
![Page 56: JSDC 2015 React-Native 實戰](https://reader034.vdocuments.net/reader034/viewer/2022042511/587a168d1a28abb4238b545b/html5/thumbnails/56.jpg)
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