React Navigationで深いネストのルートに遷移する

React Navigation でこんな感じのネストしたルートがあります。

• ホーム
• メニュー
  • 設定
    • 詳細設定 1
      • 詳細設定 1.1
    • 詳細設定 2
  • ヘルプ

ホーム から同じ階層の メニュー に遷移したいときは navigator オブジェクトの navigate メソッドを呼び出します。
(分かりやすくするために日本語で書いていますが、スクリーンのIDは通常英数字です)

<Button
  onPress={() => navigation.navigate('メニュー')}
/>

ホーム からネストしたルートである 設定 に遷移したいときは、2段階の遷移が必要です。

• ホーム ← ここから
• メニュー
  • 設定 ← ここへ

こんな書き方で実現できます。

<Button
  onPress={() => navigation.navigate('メニュー', { screen: '設定' })}
/>

参考:
React Navigation で別タブのスクリーンに遷移させる方法 | React Native

深いネストのルートに遷移する

では、さらに 1 段深い 詳細設定1 に移動する場合はどうすれば良いでしょうか？

• ホーム ← ここから
• メニュー
  • 設定
    • 詳細設定 1 ← ここへ

この書き方は React Navigation のドキュメントに書いてあるのですが、若干分かりにくい場所にあります。

Passing params to a screen in a nested navigator

こちらを参考に実装するとこうなります。

<Button
  onPress={() =>
    navigation.navigate('メニュー', {
      screen: '設定',
      params: { screen: '詳細設定1' },
    })
  }
/>

params をネストさせて screen を指定します。

さらに深くネストさせる

さらに深くネストさせることもできます。

<Button
  onPress={() =>
    navigation.navigate('メニュー', {
      screen: '設定',
      params: {
        screen: '詳細設定1',
        params: {
          screen: '詳細設定1.1',
        }
      },
    })
  }
/>

これで、どんな深いルート構造でも大丈夫ですね 🐃