最近私は React-Native に取り組んでおり、大きな進歩を遂げています。 @react-navigation/native-stack または @react-navigation/bottom-tabs のいずれであっても、React-Navigation の使用方法を知っています。これらを使用する場合には問題はありません。

しかし、私が使用しているツールをよりよく理解するために、質問があります:

ナビゲータを意図したとおりに使用すると、複数の画面が互いに「積み重なった」状態になったり、前の画面に戻るときにバラバラになったりすることがあります。私はデザインのインスピレーションを得るために Twitter をよく参照しますが、Twitter の Web アプリケーションがこの「積み重ねられた」アプローチを使用していないことに思わずにはいられませんでした。

わかりやすくするために、ここでは Web 側についてのみ説明しますが、iOS でも基本的に同じで、画面はスタックされます。 (もちろん、Twitter アプリが Web アプリのようにスタックできないかどうかは分かりませんが、それはともかく)。

文書に記載されている正しい方法でナビゲータを使用する場合

 // 画面内容 
 
 //画面2の内容 
 
 //画面3の内容 

つまり、すべての画面コンポーネントは技術的にレンダリングされ、選択された画面のみが非表示になりません。

私がやりたいのは、常に 1 つの画面のみをレンダリングし、他の画面を非表示にしないことです。ユーザーが別の画面に「移動」すると、どのページに移動しようとしているかに応じて、この 1 つの画面のコンテンツが変化するようにしたいと考えています。

Twitter の仕組みは、ページのコンテンツを含む

コンテナがあり、ユーザーがどのページにいるかに応じて、コンテナに応じてコンテンツ。 Twitter は React-Native を使用しているため、これを行う方法があるはずです。これを行うための事実上の方法ではなく、少なくとも半公式の方法があればいいのにと思います。 「React-Navigation」のドキュメントを検索しましたが、同様の説明は見つかりませんでした。

要約: React-Navigation は同時に存在するように画面を「スタック」しますが、スタックの「一番上の」画面のみが表示されます。 1 つの画面のみを使用し、ユーザーが移動するページに基づいてその画面のコンテンツを変更する方法を探しています。

React-Navigation のドキュメントを検索して、探しているものと同様の動作の説明を見つけようとしましたが、何も見つかりませんでした。私が説明したことをさらに実行する、より優れた React ナビゲーション ライブラリがある場合は、ぜひ指摘したいと思います。