React Navigation Stackをリセットする

Stackをリセットする

Stack Navigatorを使っているとStackがどんどん溜まっていき重くなっていきます。
そこでStackをリセットするには　navigation.dispatch と StackActions.reset を使います。

StackActions,NavigationActionsのインポート

import { StackActions, NavigationActions } from 'react-navigation'

resetアクションをdispatch

const resetAction = StackActions.reset({
              index: 0,
              actions: [
                //routeNameはリセットした時の初期スクリーンの名前
                NavigationActions.navigate({ routeName: 'Home' })
              ],
            });
            navigation.dispatch(resetAction);
});

活用例

Navigatorは実際使う時には複数使うことがほとんどだと思います。今回はTabNavigatorの中でStackNavigatorを使っている場合を考えます。Tab遷移をする際にStackをリセットしてからタブを移動してみましょう。

-TabNavigator
 -Home              <--遷移先
 -StackNavigator
   -PlanList
   -PlanDetail     <--現在地

上のような構成で単純に
navigation.navigate('Home')とするとHomeには移動できますがTabNavigatorでStackNavigatorに来た時にStackがリセットされていないためPlanDetailに来てしまいます。そのため遷移する際にStackをリセットしてから移動してみましょう

const resetAction = StackActions.reset({
    index: 0,
    actions: [
    NavigationActions.navigate({ routeName: 'PlanList' })
    ],
});
navigation.dispatch(resetAction);
navigation.navigate('Home');

そのままですね。自分のメモなので許してください。