ReactNavigationのStackNavigatorで常に最初のrouteを表示する方法

ReactNative

2018.06.09

こんな感じのアプリを作っている。Screenは本当はもうちょっと多いけど。

TabNavigator
　├ StackNavigator(SN1)
　│　├ ScreenA
　│　└ ScreenB
　│
　├ StackNavigator(SN2)
　│　├ ScreenC(一覧画面)
　│　└ ScreenD(詳細画面)
　│
　└ StackNavigator(SN3)
　　 └ ScreenE

この時、例えばSN2のScreenDに画面を進めた状態で、SN3のタブを開き、再度SN2の画面を開くとScreenDが表示される。
こういうのでも良い場合も有るだろうが、今回はSN2のタブを開いたら、常にScreenCが開かれるようにしたい。

色々迷ったあげく、最終的にはこういうコードで実現出来た。

const SN2Stack = createStackNavigator(
  {
    HogeList: {
      screen: ScreenC,
      navigationOptions: ({ navigation }) => ({
        title: '一覧画面'
      })
    },
    HogeDetail: {
      screen: ScreenD,
      navigationOptions: ({ navigation }) => ({
        title: '詳細画面'
      })
    }
  },
  {
    initialRouteName: 'HogeList'
  }
)

SN2Stack.navigationOptions = {
  tabBarLabel: 'good!',
  tabBarIcon: ({ focused, tintColor }) => {
    return <IconFontAwesome name='hoge' size={25} color={focused ? themeColor : hogeColor} />
  },
  tabBarOnPress: ({ navigation, defaultHandler }) => {
    navigation.dispatch(StackActions.reset({
      index: 0,
      key: 'HogeList',
      actions: [NavigationActions.navigate({ routeName: 'HogeList' })],
    }))
  }
}

StackActions.resetのパラメータに渡している「key」がまさにキーだった。
最初はこれが無い状態で試していたら

There is no route defined for key HogeList. Must be one of 〜

って感じのエラーが出て、表示される候補はSN2以外のStackNavigatorに登録しているrouteのリストだった。

StackActions reference · React Navigation (v2)

正直、ドキュメントを見ても、何でkeyを指定する事で解決したのか分からない…。

the navigator with the given keyのnavigatorって、ここで言えば「SN2Stack」にあたるんじゃないの？
てことは、SN2Stackに一致するkeyを与えないと駄目とかじゃないのか？そのままSN2Stackとか。
その配下のrouteNameなら何でも良いって事？

良く分からん…。

とりあえず動いたから良しとしよう。