jsdc 2015 react-native 實戰

React-Native 實戰融合現有 iOS App

Sam Lee

Sam Lee現職 : 趨勢科技 FED 熱衷 : 前端 / 後端 技術

淺草籤 作者

Email: lee.orz@gmail.com

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