1. ホーム
  2. react-native

[解決済み] リアクトナビゲーションで異なるネストされたスタック間を移動する方法

2023-04-04 01:23:47

質問

目標

リアクトナビゲーションを使って、ナビゲータ内の画面から別のナビゲータ内の画面へ移動する。

詳細

以下のようなNavigatorの構造を持っている場合。

  • 親ナビゲータ
    • ネストナビゲーター1
      • 画面A
      • 画面B
    • ネスト・ナビゲーター 2
      • 画面C
      • 画面D

ネストされたナビゲーター 2 の画面 D から、ネストされたナビゲーター 1 の画面 A に移動するにはどうしたらよいでしょうか。今、私が試した場合 navigation.navigate を実行すると、画面Aは存在せず、画面CとDのみが存在するというエラーが発生します。

このサイトでも、GitHubでも、いろんなところでいろんな形で質問されていると思いますが( https://github.com/react-navigation/react-navigation/issues/983 , https://github.com/react-navigation/react-navigation/issues/335#issuecomment-280686611 ) が、これほど基本的なことなのに明確な答えがなく、解決策を探すために何百もの GitHub のコメントをスクロールするのは素晴らしいことではありません。

おそらくこの質問は、この非常に一般的な問題にぶつかっているすべての人のために、これを行う方法を体系化することができます。

どのように解決するのですか?

更新しました。React Navigation v5 に関しては mahi-manさんの回答 .


を使用することができます。 の第三パラメータ navigate で、サブアクションを指定します。

例えば、ネストしたナビゲーター2の画面Dから、ネストしたナビゲーター1の画面Aへ移動したい場合。

this.props.navigation.navigate(
    'NestedNavigator1', 
    {}, 
    NavigationActions.navigate({ 
        routeName: 'screenB' 
    })
)

こちらもご確認ください。 https://reactnavigation.org/docs/nesting-navigators/