Hybrid App 和 React Native 開發那點事

時間 2019-11-05

標籤 hybrid app react native 開發那點欄目 Hybrid 简体版

原文原文鏈接

簡介：Hybrid App（混合模式移動應用）開發是指介於Web-app、Native-App這二者之間的一種開發模式，兼具「Native App 良好用戶交互體驗的優點」和「Web App 跨平臺開發的優點」。不少人都知道，React Native 是 Facebook 開源的框架，能夠直接用 Javascript 開發原生的APP，本文則會圍繞開發中的具體實踐問題進行討論。php

此前，咱們在多篇文章中提到過 React Native，本次移動精英開發俱樂部又專門圍繞 Hybrid App 和 React Native 進行更加深刻的討論，但願可以給咱們的開發者同窗，提供一些建議。文章系朱雅麗整理， IT 運維管理平臺 OneAPM 負責審校。如下爲討論內容：html

主持人－東輝：你們好，今天咱們的主題是 Hybrid App 和 React Native，歡迎你們踊躍進行發言。前端

陳偉鵬－雅特iOS：我想知道用了 React Native 的同窗，對這種技術的態度和評價？react

郭鐙鴻：貌似攜程、平安科技還有天貓都在使用 React Native，說明仍是有市場的。git

主持人－東輝：React Native 在 Android 上的表現貌似不太好，坑比較多吧？angularjs

龍蝦：React Native 的首次加載很慢，有緩存就好一些，其餘的還能夠，落地的難度就是不知道該客戶端開發作，仍是前端作。es6

郭鐙鴻：React Native 有效解決了H5的性功能障礙問題，這點很不錯。就像 React Native 的理念：leaReact Native once, write anywhere .github

James：我的理解，React Native 的推出應該是爲了統一移動端的開發模式。typescript

羅飛：你們能夠分享一下本身公司用 Hybrid 或 React Native 的現狀，都是怎麼用的？編程

利炳根：現狀就是：大部分均可以用 React Native 作完，只有少部分須要原生支持。固然，也和咱們的項目有關。由於咱們如今作得功能都比較簡單，咱們主要工做都在處理一個問題：一個平臺上顯示好好的東西，一樣的代碼，在另外一個平臺上，就不行了。而後還有就是對不一樣的屏幕的適配，目前還沒遇到特別難的東西，今天看看有沒有人用來作大型成熟項目？學習一下經驗。

Rory He：React Native 須要技術的學習成本其實更高一些。

frankphper：前端是否是由於 React Native 才變成「錢」端？

Kiss小錦：前幾天看到阿里作了開源，效果參考淘寶、聚划算品牌團。https://github.com/alibaba/LuaViewSDK 。

其實，移動 APP 開發領域，要極致體驗發佈就不靈活（Native），要靈活發佈就沒有極致體驗（H5）。有沒有一種技術方案能夠兼顧極致的體驗和靈活的發佈？ LuaView 能夠完美解決上述兩個問題，不過須要學習 lua 語言。

主持人－東輝：你們也能夠說實踐、使用場景以及收益等問題。

Kiss小錦：使用場景通常是電商作大促活動須要靈活上線。

利炳根：http://reactnative.cn/docs/0.21/getting-started.html 你們能夠看看這裏的文檔，再買本入門書，通常的項目開發就差很少了。

杜鵬飛千鋒安卓：直接用 WebView 和普通網頁不更簡單麼？

郭鐙鴻：若是那樣的話，性能和功能都有問題。

Shawn：我認爲目前 Hybrid 開發形式有三種：

1.原生開發一部分+H5開發一部分，經過 WebView 橋接； 2. 純 H5 開發，須要本地功能時經過第三方打包工具實現如 HBuilder+ ； 3. 用 H5 或 JS 開發，但最終編譯成 Native 應用，如 ReactNative、APICloud、Cocos2d-js、Unity3D-js 等。還有種形式是 Webview+Runtime ，通常用在H5遊戲加速，像騰訊 X5 瀏覽器、UC 等都內置了 Runtime；

jia_dongxu：能夠用 cordova+ionic angular。v2 優化很多移動端，angular 也要出2了，聽說優化移動，不知道 ionic2 和 angular2 正式版性能會不會提升不少？

真哥：不過，ionic 在安卓手機上性能很差。

郭鐙鴻：ionic 有點卡，iOS 相對好些。

Shawn：移動端性能是個問題，傳統的PC 端方案仍是不要用在手機上了。

柴明昆：貌似Angular 2.0對Native Apps 的支持和渲染是基於 React Native 的，咱們也是某個模塊改動需求頻繁，最近正在研究評估使用 React-Native。

James：ionic2 nightly 已經有了，ionic2 徹底採用angularjs2 ，用的 typescript es6，在性能會很大改善。angularjs2 對移動端也進行了優化，React Native 目前應該都是大廠或者小範圍在使用。

真哥：對dom的操做太頻繁，特別是雙向數據綁定，不太現實。若是你須要快速迭代，能夠考慮React Native，若是特別注重體驗和性能，建議用原生。

利炳根：前段時間，有外包公司專門推 React Native，號稱基本的東西都已經封裝了一遍，若是真的能作到他們宣稱的那個程度，開發通常的 APP 超級快。不少通常的 APP，核心的競爭力是業務上的，對 APP 自己卻是不在意，怎麼快怎麼來。固然，你們未必樂意作這類開發。

以前有公司，作了一年快速迭代，找到了真的有用戶願意用的業務，纔開始優化的，一開始優化，優化完發現沒人用，就是個悲劇。

竇靜軒：關鍵是須要自定義，仍是須要 Native 開發，因此不會出現誰替代誰。想跑起來一個React Native 的項目沒那麼容易，還須要基本的 Node 知識。

我麻不拿到溫網冠軍就不更名字：這樣會不會致使大部分公司願意用 React Native，從而減小開發成本？

利炳根：固然，這是公司的悲劇，開發人員卻是無所謂的，公司倒了能夠去下一家，反正本身技術練到了。咱們兩天前來的新同事，已經負責 React Native 的動畫開發了，總得來講，上手仍是很容易的。

Shawn：也就是說大公司追求用戶體驗，若是不計成本和開發效率的話，仍是會用原生來作。

真哥：React Native 也屬於一種開發模式了，其實優缺點很明顯，React Native 只能調用原生接口，可是不能對原生作擴展，要作擴展只能寫 Native，React Native 比 ionic1 好一點，不過如今學習 ionic2 或者 angular2 須要去看看 typescript。

jia_dongxu：React Native 的缺點，Android 體驗太差了，很是卡。

利炳根：卡的問題，須要把開發模式關了，會好很是多，而後，頁面仍是能夠適當優化一下的。

竇靜軒：若是說有一批人，把市面上流行的組件的都封裝了，而且開源了，那樣推廣的速度也會很快。

我麻不拿到溫網冠軍就不更名字：就是說若是須要自定義控件的時候，React Native 作不到？

真哥：是的，React Native 不能作接口開發。

竇靜軒：React Native 提供自定義組件的方法，須要 Native 本身開發。

利炳根：把原生封一層給 React Native 用，安卓不是很瞭解，iOS 這塊是很是簡單的。固然也多是由於我作的功能比較簡單。

柴明昆：React Native 在使用 View 的時候，這些 View 是要通過本地定製的，而且將相關方法暴露給 JS ，這樣 JS 端才能正常使用。

張春明：React Native 是否採用？我通常這麼想：可否達到快速迭代，能夠適應產品的各類變態修改(控件修改)，有問題容易追蹤定位，現階段更傾向於混合開發，而後各取所需。

Shawn：因此說目前尚未一套完美的方案，也就是說須要原生來作的，咱們就用原生好了，H5 優點的地方就用 H5，這才叫混合開發嘛！

郭鐙鴻：React Native 在性能和功能上是沒有問題的，主要學習曲線比較陡峭，會用的人少。

竇靜軒：Hybrid 受限於 WebView 啊，WebView 若是有 Bug 你沒轍啊。