⚛️

react-navigationをv4.0.0にアップグレードした時の変更点メモ

いつの間にかreact-navigationをv4.0.0がリリースされていた

react-navigation-v4.0.0_01.png

最近の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

インストール後に起動できるはずです。

余談

react-navigation-v4.0.0_02.png

私の場合は既存プロジェクトの createBottomTabNavigator のカスタマイズ処理部分でエラーがでて困りましたが、 BottomTabBarreact-navigation-tabsでimportすればいいだけでした。よかった。

追記 2019.09.10

react-navigation v3.11.1でタブをカスタムした場合、タブ切り替え時に遅延が発生していたのがv4.0.0でサクサクに改善されていました。 react-navigation-tabsを使用した影響かもしれませんが、これはとても嬉しい。

零細経営6年目|Web・アプリ開発(React Native + Expo + Firebase)|Youtube|米国株投資|ピアノ