React-Native ナビゲーションを使用しますが、スタックは使用しませんか?

Question

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

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

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

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

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

<div style="z-index: 0; display: flex;">
   // 画面内容
</div>
<div style="z-index: -1; 表示: none;">
   //画面2の内容
</div>
<div style="z-index: -1; 表示: none;">
   //画面3の内容
</div>

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

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

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

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

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

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

Answer 1

あなたがやりたいことは、ナビゲーションに基づいて変化するコンテンツを保持する単一のメイン コンテナがある単一ページ アプリケーション アーキテクチャにより適していますが、React Navigation は画面を積み重ねて画面間を移動するように設計されています。

＃＃＃解決＃＃＃

カスタム ナビゲーション コンポーネントを作成できます。これを

NavigationContainer

と呼びます。変更するコンテンツを保持します。このコンポーネントは、現在表示されているページを管理し、それに応じて次のようにコンテンツをレンダリングします: リーリー

CustomNavBar

は、各ページのボタンまたはリンクを含む別のコンポーネントです。 ボタン/リンクが押されると、その親コン​​ポーネント、つまり NavigationContainer
から小道具として受け取った navigateTo 関数が呼び出され、そこにある currentPage# が更新されます ##州：＃＃＃ リーリー 制限 URL ベースのナビゲーションを改善するには、ユーザーが URL を使用して特定のページに直接移動できるようにするディープ リンクを実装する必要があります。さらに、必要に応じてルーティング、アニメーション、トランジションを手動で処理する必要があります。

React Navigation などのライブラリによって提供される組み込みナビゲーション機能の一部が失われる可能性もあります。