react-navigationのインストール@expo 2019年9月11日編

記事執筆時の2019年9月12日現在、react-navigation v4を利用しようとすると、いくつかの依存nodeを追加する必要があり、かつ、普通に追加するとバージョンミスマッチを起こしてWarningが出る。

前提

expo利用が前提です。

モジュールのインストールと調整

インストール

react-navigation本家にも記載がありますが、expoを利用する場合、下記のようにすると依存モジュールのインストールと（本当なら）適切なバーションのモジュールを入れてくれるようです。

expo install react-navigation react-native-gesture-handler react-native-reanimated react-native-screens

バージョンミスマッチ防止

ただ、上記のままだとバージョンがミスマッチとなるため、package.jsonを下記のように変換します。

...
    "react-native-gesture-handler": "~1.3.0",
    "react-native-reanimated": "~1.1.0",
    "react-native-screens": "1.0.0-alpha.22",
...

^を~に。^をトル。など。

Stack, Drawer, Tab Navigatorのインストール

v4から、分離されたようなので追加インストールする必要があります。

npm install --save react-navigation-stack react-navigation-tabs react-navigation-drawer

import

importも個別に。

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createDrawerNavigator } from 'react-navigation-drawer';