React Nativeのルーティングライブラリ比較

ルーティング(Router)ライブラリとは、画面遷移や戻る、進むなどを行うライブラリのことです。

WebではSPAのページを作成するときに必要なため、SPAでなければ使用することも無いと思いますが、

React Native単体ではルーター機能はほぼ無いに等しく、現在のバージョンではNavigatorIOSというAPIしかありません。

名前が示す通り、Androidでは使用できないため、これは使えません。

画面遷移を含まないアプリなんてまず無いと思いますので、RNアプリ作成するにはRouterライブラリは必須です。

RNで使用できるルーティングライブラリの上位3つを比較してみました。

主にこの3つがメインかなと思います。

一応、アプリ開発で全て触ってます。上から順に使っていった感じです。

そして、最終的にReact Navigationに落ち着きましたという記事です。

React Native Navigation

wix/react-native-navigation

** ★Star 4300 NativeModule使用 **

App-wide support for 100% native navigation with an easy cross-platform interface.

利点:

• ネイティブの処理で遷移するため、速い。そのため、デザインもネイティブベースである。

欠点:

• ネイティブモジュールを使用しているため、Expoを使用できない
• ネイティブで動作するため、カスタマイズ性は低い

個人的に: Reduxサポートはしているみたいだが、公式のredux-exampleがdeprecatedだったり、イマイチ書き方がわからなかった。ちょっとドキュメントが整備されていない?

AndroidとiOSでの表示のプレビューなどもないため、よくわからなかったという感じでした。

一番速度的には速いと思うのだが、Expoで開発したいというのもあるため、非採用

React Native Router

aksonov/react-native-router-flux

** ★Star 5200 **

First Declarative React Native Router

利点:

• カスタマイズ性が高く作られている。NavBar/TabBar部分に独自のcomponentsを表示できる
• react-routerライクで作られているため、使ったことのある人は入りやすい

欠点:

• 独自な分、NavBar/TabBarっぽいデザインが用意されていない。デザインを作って指定する必要がある

個人的に:

たとえば公式APIにTabBarIOSがあるが、Androidには存在しない そのため、iOSとAndroidでTabのデザインを分けるか、独自でデザインを作る必要が出てくる、それはやりたくないため見送り。

※ここで話しているのはv3の話です。v4ではReact Navigationがベースにカスタマイズ出来るよという感じらしいので、

デザインはReact Navigationと同じようなものが使えると思います。 v4が正式になったら、こっちのほうを採用したかも・・・

React Navigation

react-community/react-navigation

** ★Star 6400 **

Learn once, navigate anywhere.

利点:

• ネイティブっぽいデザインがデフォルトであり、少ないコードで割とすぐにそれっぽく作れる。
• AndroidとiOSでiOSはTabbar、AndroidはTabLayoutっぽいデザインになる。
• Star数も一番多い。ドキュメントが豊富

欠点:

• rnrfよりはカスタマイズ性は劣る。わかりやすいけどtitleをComponentsのstaticで指定する部分とか一部トリッキーだったりもする。

個人的に:

React Community製のライブラリ。 一番ドキュメントが充実しており、同じようにReact Community製のReduxサポートが充実していてわかりやすかった。

ネイティブっぽいデザインがデフォルトで表示され、開発しやすい。

rnrfよりはカスタマイズ性は劣るが、ネイティブっぽい表示が目的だったため現在これで開発中。

• 動作速度重視ならReact Native Navigation
• カスタマイズ性重視ならReact Native Router
• 開発速度重視ならReact Navigation

という感じで、うまいこと差別化ができていると思います。

一番困るのは非常に名前が紛らわしい点でした。特にnpmは似たような名前のスパムすらあるから困る。

(今作ってるRNアプリはOSSとして公開するつもり。明日。頑張ろう。)