身為一個 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 開發的相關問題。

工商服務時間

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