jsdc 2015 react-native 實戰
TRANSCRIPT
React-Native 實戰融合現有 iOS App
Sam Lee
Agenda
• Why React-Native
• 實戰
• Demo
Why React-Native ?
問 題
• UI 變化的很快
• iOS / Android 的 UI 無法共⽤用
• 上架時間⻑⾧長 (Review時間)
• 線上修正 Bug 相對困難
WebView的難處
• 效能不佳
• 相容性問題
• 離線問題
站在巨⼈人肩膀!
跨平台開發⼯工具⼯工具 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
跨平台開發⼯工具⼯工具 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
跨平台開發⼯工具⼯工具 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
react-native init YourProject
熟悉的 React
Index.ios.js
產⽣生 JSBundle File
Cmd + R = Reload
Cmd + D = Debug
Debug in Browser
Live Reload!
是不是 Webview?
繼承 UIView 不是 UIWebView !
JavaScriptCoreiOS7+
翻譯⽶米糕!!!!!!!
ReactJS JavascriptCore
RCTBridge NativeMethod
Javascript Bridge
Obj-C bridge
要如何跟現有App 整合？
主畫⾯面
ThumbView
TableVie
ThumbView
ThumbView
ThumbView
ThumbView
ThumbView
React
⺫⽬目標
????????
三 步 驟
• 在現有App 安裝 React-Native (CocoaPods)
• 把 React Native View (RCTRootView) 放進現有 App
• 準備 index.ios.js (iOS)
遇到的問題• 把 React Native View (RCTRootView) 放進現有 App
嚇
沒那麼簡單, 就能替換 別的全不看...
原⽣生的 TableView 宣告
取代成 RCTRootView
ReactJS JavascriptCore
RCTBridge NativeMethod
Javascript Bridge
Obj-C bridge
三 步 驟Create Module
ImportRCTBridgeModule
Export Method
遇到的問題Export Method
Index.ios.js開始刻 React-Native UI
取得跟 Native module ReactAPI 的接⼝口
透過 ReactAPI module 呼叫 Native Function
Render出 ListView
安裝React-Native
ReactJS File
React-Native View
融 合!!
完成!!!
Demo Time…
感 想
徹底擺脫WebView
• 解決了效能跟兼容性的問題
• Component 的設計, 所以元件可以⾃自由組合使⽤用
• 可以使⽤用原⽣生的 Animation
• 跟 WebView ⼀一樣可以在線更新
Learn once , Write anywhere.
挑 戰 / 疑 慮• 從 Web 轉到 Native 觀念的不同
• Appstore 的政策是否會改變
• 低階機型的效能問題
• Upgrade 的問題
• iOS6 無法使⽤用 (這會隨時間消逝)
關於 Android
Demo 2 iOS & Android
Q & A
四 步 驟• 新增
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
謝 謝
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