JSDC 2015 React-Native 實戰
8 likes1,622 views
share how to integrate react-native with existing iOS & Android App
![[2018 .NET Conf].NET Core與Azure DevOps應用於企業開發](https://cdn.slidesharecdn.com/ss_thumbnails/random-180929054552-thumbnail.jpg?width=560&fit=bounds)
More Related Content
What's hot (20)
Viewers also liked (6)
Similar to JSDC 2015 React-Native 實戰 (20)
JSDC 2015 React-Native 實戰
- 1. React-Native 實戰 融合現有 iOS App Sam Lee
- 2. Sam Lee 現職 : 趨勢科技 FED 熱衷 : 前端 / 後端 技術 淺草籤 作者 Email: lee.orz@gmail.com
- 3. Agenda ? Why React-Native ? 實戰 ? Demo
- 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
- 14. Cmd + R = Reload
- 15. Cmd + D = Debug
- 16. Debug in Browser Live Reload!
- 17. 是不是 Webview?
- 20. 繼承 UIView 不是 UIWebView !
- 22. 翻译?米糕!!!!!!!
- 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. 吓
- 32. 取代成 RCTRootView
- 37. 三 步 驟 Create Module Import? RCTBridgeModule Export ? Method
- 41. 取得跟 Native module ReactAPI 的接?口
- 42. 透過 ReactAPI module 呼叫 Native Function
- 43. Render出 ListView
- 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