React-Native 탐색을 사용하지만 스택은 사용하지 않습니까?

Question

그래서 저는 최근 React-Native 작업을 하면서 큰 발전을 이루었습니다. 나는 @react-navigation/native-stack이든 @react-navigation/bottom-tabs이든 React-Navigation을 사용하는 방법을 알고 있습니다. 이것들을 사용하면 아무런 문제가 없습니다.

하지만 제가 사용하는 도구를 더 잘 이해하기 위해 질문이 있습니다.

네비게이터를 의도한 대로 사용하면 여러 화면이 서로 "쌓여" 있거나 이전 화면으로 돌아갈 때 분리되는 현상이 발생합니다. 나는 종종 디자인 영감을 얻기 위해 Twitter를 찾아보는데, 그들의 웹 애플리케이션이 이러한 "스택" 접근 방식을 사용하지 않는다는 것을 발견하지 않을 수 없었습니다.

간단함을 위해 여기서는 웹 측의 상황만 이야기하고 있지만 iOS에서는 기본적으로 동일하며 화면이 쌓입니다. (물론 트위터 앱이 웹 앱처럼 스택되지 않는지는 알 수 없지만 어쨌든).

문서에 설명된 대로 올바른 방식으로 내비게이터를 사용하는 경우

<div style="z-index: 0; 디스플레이: flex;">
   //화면 내용
</div>
<div style="z-index: -1; 디스플레이: 없음;">
   //화면 2의 내용
</div>
<div style="z-index: -1; 디스플레이: 없음;">
   //화면 3의 내용
</div>

따라서 모든 화면 구성 요소는 기술적으로 렌더링되며 선택한 화면만 숨겨지지 않습니다.

제가 원하는 것은 항상 하나의 화면만 렌더링하고 다른 화면은 숨겨지지 않는 것입니다. 사용자가 다른 화면으로 "탐색"하면 사용자가 이동하는 페이지에 따라 이 화면의 콘텐츠가 변경되기를 원합니다.

Twitter의 작동 방식은 페이지의 콘텐츠가 포함된

그에 따라 컨테이너 내용. 트위터는 React-Native를 사용하므로 이를 수행할 수 있는 방법이 있어야 합니다. 이를 수행하는 사실상의 방법보다는 최소한 준공식적인 방법이 있었으면 좋겠습니다. 'React-Navigation' 문서를 검색했지만 비슷한 설명을 찾지 못했습니다.

요약하자면: React-Navigation은 화면이 동시에 존재하도록 "스택"하지만 스택의 "맨 위에" 있는 화면만 표시됩니다. 저는 하나의 화면만 사용하고 사용자가 탐색하는 페이지에 따라 해당 화면의 콘텐츠를 변경하는 방법을 찾고 있습니다.

React-Navigation에 대한 문서를 검색하여 내가 찾고 있는 것과 유사한 동작에 대한 설명을 찾으려고 노력했지만 아무 것도 찾지 못했습니다. 제가 설명한 것보다 더 많은 기능을 수행하는 더 나은 React 탐색 라이브러리가 있다면 그것을 지적하고 싶습니다.

Answer 1

원하는 작업은 탐색을 기반으로 변화하는 콘텐츠를 보유하는 단일 기본 컨테이너가 있는 단일 페이지 애플리케이션 아키텍처에 더 적합합니다. 그러나 React Navigation은 화면을 스태킹하고 화면 사이를 탐색하도록 설계되었습니다.

솔루션

변경되는 콘텐츠를 보관하는 사용자 정의 탐색 구성 요소를 생성할 수 있습니다. 이 구성 요소는 다음과 유사하게 현재 표시된 페이지를 관리하고 이에 따라 콘텐츠를 렌더링합니다. 으아악 NavigationContainerCustomNavBar는 각 페이지에 대한 버튼이나 링크가 포함된 또 다른 구성 요소입니다.

버튼/링크를 누르면 상위 구성 요소에서 소품으로 수신되는 navigateTo 함수를 호출합니다. 즉,

여기에서 currentPage 상태를 업데이트합니다. CustomNavBar是另一个包含每个页面按钮或链接的组件。
当按下按钮/链接时，它将调用navigateTo函数，该函数从其父组件即NavigationContainer接收为props，以更新那里的currentPage 으아악

제한사항

더 나은 URL 기반 탐색을 위해서는 사용자가 URL을 사용하여 특정 페이지로 직접 이동할 수 있도록 딥 링크를 구현해야 하며, 필요한 경우 라우팅, 애니메이션 및 전환을 수동으로 처리해야 합니다.

React Navigation과 같은 라이브러리에서 제공하는 내장 탐색 기능 중 일부가 손실될 수도 있습니다.