一位 iOS 開發者使用 React Native 的體驗

xdld 9年前發布 | 35K 次閱讀 React Native

一位 iOS 開發者使用 React Native 的體驗

當我初次聽聞 React Native,認為它只不過是提供給 web 開發者嘗試原生移動應用的一種方法。之前聽說JavaScript開發者可以用 JavaScript 編寫一個 iPhone 應用,我還真覺得有點酷,但是我很快擺脫了要自己來試試的想法。畢竟我已經將原生 iOS 開發作為一項業余愛好很多年了,而且幾乎有兩年時間就搞這個。

我已經做過一大堆 iOS 應用 ?—? 其中有我為之驕傲的優秀應用。那些在 Xcode 中構建的應用都是使用 Objective-C 編寫的,因為那是它一直就有的方法。那是蘋果公司提供給我們來制作 iOS 應用的,因此我以及其它的開發者都會用到。之后,兩年以前當蘋果公司發布了 Swift 編程語言,我毫不猶豫的去嘗試了一下。

那仍然可以使用 xcode,并且(很明顯地)它仍然可以很順利地開發 iOS 應用程序,我可以很直接地把它拾起來--啊喲--快一點,我愿意一直使用我的蘋果生態系統。react native 仿佛對我來說是一個有趣的小實驗,然而在我的腦海里,任何真實的本地的應用仍需要寫這個本地的方法。那仿佛對我來說要浪費時間,不僅要學習 JavaScript(我毫無經驗)而且要建立一個完整的新的應用程序方法,當我已經開始掌握建立他們“真實”的方法時。

如果時間快進一兩個月,我可以很自信地說,我可能從來也不會使用

Objective-C 或者 swift 來寫 iOS 應用。

我們收到了一個新的移動應用項目,并且我回顧了此需求和設計方案。正當我要敲擊那個美麗的 xcode 藍色圖標,開始啟動一個新項目時,我們的互動總監 Adam,走過來,說:“讓我們使用 React Native 來做到這一點”。

他解釋道這個項目合同的一部分明確要求這個 app 也得可用于 Android。盡管 React Native 不曾(現在也不)可用于 Android,但是我們知道 非死book 活躍在這點上。理論上,如果我們用 iOS 版的 React Native 構建 app,很多部分可以在 Android 版發布后“立刻工作”。

好吧,我不是太開心。我覺得我站在 iOS 開發能力的頂峰,但卻被要求完全不用這能力。我懷疑自己是否有能力在不可避免的學習曲線中按時交付質量可靠的產品。更糟的是,我懷疑 React Native 本身是否有能力產出一個質量可靠的產品。回頭看看,我甚至不覺得這懷疑是不公的。那時React Native 才剛剛在 beta 階段。文檔缺失,開源 React Native 庫和組件極少,而且供參考的代碼示例或者 Stack Overflow 帖子幾乎沒有。

我不大愿意地開始嘗試它。但是我閉塞的態度造成了更多的負面影響。我的第一道檻是學習 React Native處理 UI 布局的方式 Flexbox。從界面構造器轉變成完全用代碼設計 UI 幾乎毀了我的三觀。我痛苦地構建著最簡單的視圖。

但不僅僅是UI——所有的事都不一樣了。那是我最大的論點。

每次我卡住或者不明白某些東西,我總是告訴我自己“用 Objective-C 的話我5秒鐘就能搞定”。每次我發現 ReactNative 的一個 bug 時(數量可觀),我總想“這 bug 在 Object-C 里就不存在,為什么我要在這兒跟它斗個你死我活?”。

整整兩個星期,我的工作悲慘萬分。我感覺從一個專家級的 iOS 開發者變成了一個這輩子沒寫過一行代碼的傻子。我要崩潰了,直到我花了一個周末清理我的腦袋。我往回走了一步,發現 Adam 早已做了很多 React Native 的研究。我必須相信他作為我們的交互總監不會把我帶入一條爛路。我決定周一好好干,把腦袋冷靜下來,假裝 Object-C 和 Swift 從來沒存在過,然后把這事兒搞定。


學習愛上React

幾周前,我們提交了我們的第一個 React Native 應用到 App Store。我為這 app 的表現感到極其自豪,我迫不及待地要寫下一個了。考慮到我僅僅一個多月前才完全搭上 React Native 這輛車,是什么改變了我的想法呢?

React 范式

在 React 中,每一份 UI 正在或者將一直存活于 render() 方法中,并且通過“狀態”控制。render() 方法定義了 UI 對應于每個狀態的樣子,并且通過調用 setState(),React 決定哪些需要改變并切實為你改變它。想象一個簡單的視圖,只有一個“Hello World”標簽和一個按鈕。每次點擊按鈕需要將標簽在“Hello World”與“Goodbye World”之間切換。在 Objective-C 中,我需要在按鈕的處理方法中寫一些丑陋的if語句,像

if ([label.text isEqual:@”Hello World”]) {
    label.text = @”Goodbye World”;
} else {
    label.text = @”Hello World”;
}

它運行的挺好,但是那些UI代碼完全與我之前創建標簽的地方脫節了(可以在代碼中或者在界面構建器中)。在 React 中,我們可以在我們的狀態中定義一個 buttonClicked 的 bool 變量,那么 render() 方法中的標簽就看起來是這樣:

<Text>
    {this.state.buttonClicked ? ‘Hello World’ : ‘Goodbye World’}</Text>

然后我們的按鈕處理方法就變成這么簡潔:

this.setState({buttonClicked: !this.state.buttonClicked});

所有的視圖代碼處在同一個地方,通過狀態控制一切。這使得理解和調試代碼變得前所未有的簡單。

Flexbox

這是我起初最恨之入骨的 UI 布局工具,不過現在是我最喜歡的 React Native 的一部分了。我承認一開始很難領會它,但只要你一旦弄懂它,那么構建適應各種尺寸的屏幕的 UI 就會變得十分簡單快速。我先前一直沉迷于 Xcode 的可視化界面構建器。現在看來,自動布局要比 Flexbox 復雜得多了。Flexbox 使用的類 CSS 的樣式化方式使得樣式重用只需要簡單的復制粘貼。還有最棒的是,你可以不花多少時間就將樣式調至完美。

實時的重新載入

沒錯,要查看一個按鈕向右移動 5 個像素的效果,不過是 Command+S 的事情。React Native 可以配置成在 iPhone 模擬器中自動重新渲染當前的視圖,而不用重建 Xcode 項目。這是大有益處的,不僅因為省去了重建的時間,而且你可以處理嵌得很深的視圖,并且調整 UI 時不用一路返回到上層的視圖去。

Android

暫時還沒,但就要來了——而且一定會很棒。我一開始對 React Native 猶豫不決是因為我早已喜歡上原生 iOS 開發。對此我沒任何不滿。但是我也做原生 Android 的開發,這就不大好了。React Native將會在 Android 圈很受歡迎,我扳著手指頭等待這一刻來臨。這將是移動應用開發的一場革命,一份代碼兩個平臺。

懷舊情緒

想念 Xcode

我依舊想念 Xcode,或真的只是一個通常的 IDE。我努力搭建一個不錯的 React Native 開發環境,但這沒那么容易。Sublime Tex t加上一堆插件提供了我不錯的代碼高亮和檢查。Sbulime 能基于同一個文件中的其它變量等提供代碼自動完成功能,但是沒有 Xcode 那么健壯好用。我依舊需要全程開著 React 的文檔作為參考。

像是鍵入 React.PropTypes.f 后 IDE 沒提示‘func’或者‘function’,這種小事是挺討厭的。我還想念 Xcode 的版本編輯器,它可以允許我細致地與上一個 git 提交中的文件作比較,甚至還可以在行的級別上進行撤銷改動。我知道第三方程序可以做到這點,但作為 IDE 的一個重要特征就是包辦所有啊。

要運行一個 React Native 項目,我需要運行終端來啟動 npm 打包,運行 Chrome 來調試,運行 Sublime 來改代碼,最后運行 Xcode 來開始項目以及模擬器。這些都瑕不掩瑜,但的確是阻礙我邁向 React Native 的負面因素。我強烈希望 Nuclide(非死book 的 IDE)可以解決部分或全部的這些負面因素。

橋接(bridging)

非死book 還沒有或者說未來也并不打算將 iOS 的所有 API 都移植到 React Native 中,對剩余的部分他們提供了一種“橋接”的方式將事情交給 JavaScript 來做。我還要強調一次,當我第一次使用 React Native,關于 bridge 的文檔簡直糟透了。這種感覺讓我在每一次使用 bridge 時,都會產生放棄 React Native 的沖動。但是在 非死book 詳細解釋了 bridging 的過程,并提供更好的范例以后,它不再可怕。雖然仍然有些麻煩,但是可預見地將來種類繁多的 bridge 將會被開源,并可以在 npm 上獲得。我會說,大部分 iOS API 已經可以了嗎?

Bugs,文檔和開源社區

如果你現在開始學習,我的抱怨的絕大多數已經不存在了。Bug 每天都被修復,發行版大概一個星期左右就會更新。文檔仍需改進,但是已經有了巨大的提升。非死book 和開源社區始終如一的對這個框架進行開發。參與 React Native 在 GitHub 上的討論和在 Stack Overflow 上提問題對 React Native 來說是件好事。如果你是個 iOS 開發者,并且正在考慮是否使用 React Native,我要告訴你:”你不是一個人“。React Native 很棒,你或許應該試著以開放心態去擁抱她。還有就是不要把自己放到一個舒適的小隔間內,一如從前的我。

 本文由用戶 xdld 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!