react-navigationをv4.0.0にアップグレードした時の変更点メモ
いつの間にかreact-navigationをv4.0.0がリリースされていた
最近のreact-navigationの怒涛のアップグレードにビックリ。 何が起こってるんです?
とりあえずv4.0.0にアップグレードして起動してみるが、画面真っ白のエラー。。
どうやら下記のようにreact-navigationのimport周りを変更する必要があるらしい。 プロジェクト内で使用している部分をすべて確認するようにしましょう。
createStackNavigator - react-navigation-stack
createDrawerNavigator - react-navigation-drawer
createBottomTabNavigator, createMaterialTopTabNavigator - react-navigation-tabs
- import { createAppContainer, createStackNavigator } from 'react-navigation';
+ import { createAppContainer } from 'react-navigation';
+ import { createStackNavigator } from 'react-navigation-stack';
参考
次に、react-navigation-stack
react-navigation-tabs
など必要なものをインストールする必要があるので下記でインストール。
npm i react-navigation-stack
npm i react-navigation-tabs
インストール後に起動できるはずです。
余談
私の場合は既存プロジェクトの createBottomTabNavigator
のカスタマイズ処理部分でエラーがでて困りましたが、
BottomTabBar
もreact-navigation-tabs
でimportすればいいだけでした。よかった。
追記 2019.09.10
react-navigation v3.11.1でタブをカスタムした場合、タブ切り替え時に遅延が発生していたのがv4.0.0でサクサクに改善されていました。 react-navigation-tabsを使用した影響かもしれませんが、これはとても嬉しい。