01 前言

當我開始學習 React Native 的時候，官方文件以及很多開發者都說，處理頁面間的跳轉應該使用 Navigator 以及一個不再被推薦使用的過期元件 NavigatorIOS 。當我用了 Navigator 後，我發現了另一個可以用來代替它的元件：NavigationExperimental。在看過一些相關文章，並且做了一些深入研究之後，我發現 Navigator 和 NavigationExperimental 最將會被 react-navigation這個庫所代替。這麼說可能有些籠統，接下來我會結合我建立app的過程詳細說一下我的發現。

02 NavigatorIOS

NavigatorIOS 是 React Native 中提供的第一個頁面導航解決方案。顧名思義，它是在 RN 支援安卓之前被建立的，並且只能在 ios 上使用。當它在 ios 上呼叫原生的導航條時， 會存在一些沒有被修復的 bug，並且由於不能自定義樣式，導致我們很難按照喜歡的方式定義以自己 app 中的導航條的樣式。我甚至無法想象現在還有人願意在新建立的專案中使用這個元件了。

03 Navigator

Navigator 是用來被代替 NavigatorIOS。由於它是使用Js程式碼實現的，所以它支援 iOS 和 Android 雙平臺。它比 NavigatorIOS 使用更靈活, 但也由於不是 Native 程式碼所以在過渡動畫顯示效果上會顯得比較慢。儘管如此，官方文件中依然引導 RN 初學者們在新專案中使用 Navigator,。但是這個元件正在被逐漸代替，所以如果你正打算用 RN 建立應用，或者剛開始學 RN。我不推薦你使用這個元件。

04 NavigationExperimental

NavigationExperimental 就是對 Navigator 進行了一些改進 。也正是因為混雜了 Navigator 的原因導致該元件的程式碼顯得有些混亂且難以理解。 NavigationExperimental 使用 Scenes 間單向資料流動 (原則上它支援Flux).並且它將導航部分的程式碼和View邏輯分離。

NavigationExperimental 唯一存在的問題就是當你能控制的越多,設定和使用起來也就變得更困難。 就像 NavigatorIOS 和 Navigator 一樣， NavigationExperimental 正在逐漸被廢棄。

05 React Navigation

最新推薦的解決方式就是使用 React Navigation，這種方式也被寄予可以解決前幾種方式中存在的問題。 React Navigation 的獨特並不僅是因為它可以同時支援 iOS and Android , 而是它也可以在 web 中使用。我開始逐漸使用 React Navigation 代替 Navigator，並且不得不說這是個很讚的庫。它非常靈活，並且讓管理 tabs，管理導航棧，管理導航抽屜都變得很容易。它不像 NavigationExperimental 那麼複雜, 很容易上手使用(我僅用了15分鐘去理解它) ，並且需要我們處理的邏輯很少，因為大部分這個庫已經替我們做了。它同樣也支援 deep linking。

倉庫地址：https://github.com/react-community/react-navigation

06 結語

RN 中的導航機制本來是一團糟，但是 react-community 做的很棒，最終給出了 React Navigation 這樣一個長期解決方案。我在 App 中使用它也有一段時間了，它的簡單易用和效能上的表現都讓我覺得很滿意 。目前它雖然只發布了第五個 beta 版本，但表現似乎比較穩定。 我也特別期待這個庫以後的變化。