木是伊说 - ionic
type: channel
link: https://www.wiseclock.ca/tag/ionic/
items: 那些年，開發Hybrid App遇到過的坑（React Native）

那些年，開發Hybrid App遇到過的坑（React Native）
type: item
date: 2018-09-16T06:18:00+00:00
description: 這些年在開發App上也是遇到過不少坑了……從native到hybrid，從UI到authentication，遇到的坑是接連不斷，踩完一個掉另一個、從老坑爬到新坑一陣子才發現還是老坑好…… 現在基本沉澱好了，來總結一下，為以後失憶的自己以及正在辛苦挖掘的新入行的農民們留下點蛛絲馬跡。 為什麼選擇Hybrid App 一開始嘗試的時候也試圖開發native的iOS和Android App，不過很多東西來來回回改，兩邊都要顧及到，一個是開發時候耗時耗力，再就是維護成本也是雙倍的。像我這種懶人……自然更傾向於code once, run everywhere的Hybrid App了！ Hybrid App架構選擇 嘗試過幾種不同的Hybrid App架構，比如Xamarin、Ionic/PhoneGap (Cordova)以及React Native。最後認定的還是React Native——不得不說，真的是好用。 Ionic/PhoneGap 對於一些小型App來說其實Ionic/PhoneGap是一個很好的起點，因為你基本上只需要了解HTML和Javascript就能很好地上手了。 其中Ionic自帶的UI設計甚至會根據手機系統切換（保持和原生App一直的設計，比如說Android用的就是Material Design）。其自帶的豐富多彩的Components也能滿足大部分開發需求——比如按鈕、彈窗、ActionSheet等等。就算這些無法滿足你的App需求，你也還能使用Cordova Native插件來幫助開發——比如很受歡迎的一個就是AdMob，用來在App中插入廣告。 但如果你的項目比較複雜，或者需要展示的東西比較多（大型List），用Ionic/PhoneGap可能會嚴重拖慢App的性能。因為歸根結底Ionic/PhoneGap都是使用內嵌瀏覽器渲染的。雖然有辦法消除原生瀏覽器的300ms延遲，但面對龐大的UI渲染，Ionic/PhoneGap還是很吃力的。曾經我用Ionic做了幾十個卡片，每個卡片上有一些文本信息和一個內嵌的List，整個App滑動起來就已經不是特別順暢了。 Xamarin Xamarin和Ionic不同，完完全全是基於Native架構的。要說它是個Hybrid開發框架可能不太確切，但它確實是一個非常不錯的跨平台開發框架。和Ionic不一樣，Xamarin是直接和最新的SDK溝通，確保你能用到最新的API，然後把C#寫的代碼編譯成Native App。其實我挺愛Xamarin的。（讀到這裡你們應該能猜到後面會跟一個「但是」了……） 不過（我就不寫「但是」！），讓我棄了Xamarin這個坑的主要原因是它的用戶界面開發。誠然，Xamarin自帶的Xamarin.Forms能夠解決可能90%以上的需求——一次設計，跨平台分發。但同時你也需要注意到剩下10%的use cases會是極其痛苦的，因為一旦你有什麼UI上的需求在自帶庫中無法實現的話，你就需要手擼代碼實現。別理解錯，我說的手擼代碼是你真的需要對所有你想要分發到的平台做一個小插件。比如我當時的需求是在卡片裡內嵌一個可改變順序的List，我就需要在iOS和Android包裡分別寫一個Custom Renderer來實現——他們的代碼還很不一樣，因為底層SDK不同嘛。另外Xamarin的UI設計和Android也比較類似，用的是XAML，也有各種Layout，其實我個人覺得還是比較痛苦的。 最後就是Xamarin提供的插件真心不多——至少在我當時用的時候是吧，還有很多已經屬於比較過時的API了。考慮到需求裡可能會有蠻多沒有插件支持的功能，如果都要自己手擼可就太痛苦了，我還不如切回Native開發呢……所以最終放棄了可愛的Xamarin。 React Native React Native是我最後接觸到的Hybrid框架了。但是這東西一用就愛上了啊。相較於Ionic和Xamarin，React Native是真的取其精華、去其糟粕了。它擁有Ionic編寫UI的便捷，也擁有Xamarin執行的效率。 它不存在Ionic的性能問題，因為它本來就可以算是個半原生App了。React Native是一個用ES6編寫的框架，在你的App編譯後會將所有代碼打包成一大塊的js文件，然後React Native核心會用Objective-C或Java API將這個js文件渲染成Native View——感謝現代Javascript引擎，讓我們完全感覺不出用React Native開發的App和原生App的區別。 同時你也不需要為UI編寫擔心，因為React Native的UI編寫起來和HTML相差無幾。比如這個就是一個簡單的React Native頁面： import Rea…