Blackbing Playground

我們用 react-native 開發鉅亨網 app

身為一個 frontend developer,在看到 react-native 問世之後一直對 react-native 很有興趣,最近終於有機會可以碰到了,也因此才有這篇 勸世文 心得,本文主要想記錄一下開發到目前為止所踩過的坑,為還在 survey 技術的團隊開路。

適合用 react-native 開發嗎?

在接觸 react-native 之前,其實我們對開發 app 是還沒有信心的,一來這東西太新,二來我們也沒有實際開發過 app 的經驗,很多 UI 效果都要 survey 才知道到底做不做的到,就算 native support 也不知道 react-native 有沒有 support。一直到我們真的把 app 上架之後,才覺得比較有一點信心。但在開始之前,先確認一下是否有對 react-native 誤解:

不是 write once, run everywhere,而是 learn once, write anywhere

在大多數的情況下,你可以讓 Android/IOS 共用同一份 code,但這不代表你可以爽爽的不管平台問題就可以實作出功能。兩個平台畢竟還是有一些不樣的 user experience,例如 iPhone 沒有 back button,所以你需要為了 android 多處理 back button 的 behavior (BackAndroid)。也因此在程式裡頭還是免不了得判斷 Platform

例如:

1
2
3
const styles = StyleSheet.create({
height: (Platform.OS === 'ios') ? 200 : 100,
});

不過很方便的地方在於因為 react 本身就是個 view 的 engine,因此要將 component 拆開是輕而易舉的事情,而 react-native 可以讓你很輕鬆的將程式分開。

例如原本我們有一隻 NewsDetailPager.js 的 component,但由於在實作上 Android 和 ios 上面的行為遇到不同的問題。後來就將這個 component 拆成

  • NewsDetailPgger.android.js
  • NewsDetailPager.ios.js

就可以讓兩種平台在 compile 時就只 build 相對應的程式,也許之後也會有

  • NewsDetailPager.ms.js
  • NewsDetailPager.tizen.js

註:Facebook’s React Native gets backing from Microsoft and Samsung

總之,用 react-native 開發也是得考慮不同 platform 的問題,雖然 react-native 官方已經解決大多數的繁瑣的部分,但你仍須思考不同平台是否適合同一套 UI/邏輯。

react-native 不是 webview

不要以為你原本就用 react 開發 mobile web 之後就可以移植到 react-native,基本上可共用的部分可能只有 pure 的商業邏輯,跟 view 有關的部分都會需要重寫。

react-native 的優點

整理一下用 react-native 開發的優點:

debug 非常方便:

基本上如果只是 view 的 update,react-native 都已經做好 hot reload 了,只要程式碼修改就會局部 rerender。

React 大幅降低學習成本

如果你原本就熟悉 react 的開發流程,從 react 跳進 react-native 很快,因為原本的經驗是可以繼續累積的,包含 react, flux, redux, 各種 react performance 調效的經驗都是有用的。

感受不到跟寫 web 有太大的差別

一開始最讓我驚喜的其實是用 react-native 開發我真的不覺得我在開發 app,反而就像是多了一種特異的 browser 而已,而且 debug 也是用熟悉的 console 在 debug。react-native-debugger 也可以看到 jsx 的 tree。

專心寫你的商業邏輯

基本上 react-native 已經處理掉大部分的效能問題,例如 listView 已經處理了大量列表只會顯示使用者看到的部份而已。這讓開發者可以專注於產品功能的實現,不用花費太多心力在調整 UI 上的效能。

react-native 的生態圈非常完整

awesome-react-native 有整理了幾乎目前有的 resource ,包含教學,components 等等,看也看不完的東西。open source 的世界就是這麼迷人,based on 全世界工程師的開發與回饋造就健壯的社群。

Frontend resource

藉由 react-native,自此 frontend Engineer 可以支援 app 的開發,開發UI 上的經驗可以共用,對於組織內人力的配置也可以更加靈活彈性。

UI Explorer

UI Explorer 列出了幾乎所有 react-native 支援的 component 與範例,看 UIExplorer 有時比文件寫得更完整。

react-native 的缺點

雖然開發到現在覺得很滿意,不過還是得列一下缺點。

掰咖的 style

react-native 用 javascript 來實現 css 的設計(style),但並不是支援所有的屬性,例如 z-index (0.29 之後支援 ios)。

沒有 image-background,沒有 background-repeat 等等。不過雖然少了這些東西,大部分的需求還是可以想辦法實現的,也可以藉由 react-native-svg 做到很多漂亮的 UI。

各種踩坑

一開始在用 navigator 時用了 NavigationExperimental,但由於是 experimental,每次 react-native 更新都有 api change,因此每次都要隨著更新。

像是這個新聞內頁左右翻動的功能,看似很簡單,但因為資料是動態的,所以嘗試了好幾種 pager 的實作,最後是用 react-native-viewpager

升級總是很痛苦

react-native 每兩週就會 realease 一個版本,這使得我們在開發到第一次上架成功之間就升級了無數次,第一個版本是 0.21,到目前為止已經是 0.30,中間有幾次升級是非常重大的更新,很多相依的 package 也要跟著更新才能順利更新上去。

小結

react-native 讓前端工程師可以站在巨人的肩膀上更快速的開發,雖然到目前為止在實作中還是有許多地雷,但相信在 open source 的基礎下會更加的健壯,若您在開發的 app 功能都沒有跳脫 UI Explorer 的範例,相信要用 react-native 來開發可以相對的降低開發的時間與成本。

鉅亨網 App

另外 react-native showcase 也有我們的身影喔!(不過後來因為 showcase 的政策更新被移掉了)。

歡迎討論 react-native 開發的相關問題。

工商服務時間

歡迎有熱情於互聯網科技、財經資訊、金融理財的專家人才加入鉅亨網