ReactNativeで画面遷移を扱う方法はいくつかあると思いますが、オーソドックスなのがreact-navigationを用いたものだと思います。 その中でもタブナビゲータを利用しようとするとreact-navigation-tabsを使うことになりますが、タブを押下した際に画面遷移以外の処理を行いたい時があると思います。 今回はそんな場合のTipsです。
react-navigationインストール済みreact-navigation-tabsインストール済み今回は簡単なサンプルとしてreduxコンテナ化したTabNavigatorContainerを作成しました。
内部的にはHogeScreenとFugaScreenの2種類の画面を行き来するだけですが、FugaScreenの呼び出しの際に、独自定義したAnyActionをDispatchしたいものとします。
要件によってはAnyActionはFugaScreenのcomponentDidMount()で行われるべきですが、あくまで画面遷移前の下処理として実行しておきたいものとします。
import React from 'react';
import { Dispatch } from 'redux';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator, NavigationTabProp } from 'react-navigation-tabs';
// 任意の画面
import HogeScreen from '../HogeScreen';
import FugaScreen from '../FugaScreen';
// 任意のアクション
import AnyAction from '../AnyAction';
// createStoreしたStore
import store from '../store';
/**
* TabNavigatorを作成
*/
export const TabNavigator = createBottomTabNavigator({
'HOGE' : {
screen : HogeScreen,
},
'FUGA' : {
screen : FugaScreen,
// tabBarOnPressで押下時の処理を独自定義
tabBarOnPress : (props : { navigation : NavigationTabProp, defaultHandler : () => void }) => {
// 'FUGA'画面に関わるAnyActionをDispatch
store.dispatch(AnyAction);
// defaultHandler()で本来の'FUGA'画面への遷移処理を行う
props.defaultHandler();
}
}
},
{
initialRouteName: 'HOGE',
});
/**
* Container化
*/
const TabNavigatorContainer = createAppContainer(TabNavigator);
export default TabNavigatorContainer;ポイントはtabBarOnPressを定義している点です。
これは、通常であれば画面遷移のみを行うところに独自の処理を挟むことができます。
ここではあらかじめ作成しておいたstoreに対してAnyActionをDispatchしています。
tabBarOnPressを実装する場合は、引数として渡ってくるdefaultHandlerを実行しなければ画面遷移しなくなるという点に注意しましょう。
あくまでタブを押下した時の処理をオーバーライドしているというイメージです。
今回はreact-navigation-tabs利用時にタブの押下処理を実装して、画面遷移以外の処理を行うサンプルをご紹介しました。
アプリ内で特定の画面に移動する時だけ事前処理を挟みたい、というケースはちょくちょく見かけるため覚えておくと便利かと思います。