찾다

 >  Q&A  >  본문

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

<p>그래서 저는 최근 React-Native 작업을 하면서 큰 발전을 이루었습니다. 나는 <code>@react-navigation/native-stack</code>이든 <code>@react-navigation/bottom-tabs</code>이든 React-Navigation을 사용하는 방법을 알고 있습니다. 이것들을 사용하면 아무런 문제가 없습니다. </p> <p>하지만 제가 사용하는 도구를 더 잘 이해하기 위해 질문이 있습니다.</p> <p>네비게이터를 의도한 대로 사용하면 여러 화면이 서로 "쌓여" 있거나 이전 화면으로 돌아갈 때 분리되는 현상이 발생합니다. 나는 종종 디자인 영감을 얻기 위해 Twitter를 찾아보는데, 그들의 웹 애플리케이션이 이러한 "스택" 접근 방식을 사용하지 않는다는 것을 발견하지 않을 수 없었습니다. </p> <p>간단함을 위해 여기서는 웹 측의 상황만 이야기하고 있지만 iOS에서는 기본적으로 동일하며 화면이 쌓입니다. (물론 트위터 앱이 웹 앱처럼 스택되지 않는지는 알 수 없지만 어쨌든). </p> <p><strong>문서에 설명된 대로 올바른 방식으로 내비게이터를 사용하는 경우</strong></p> <pre class="brush:php;toolbar:false;"><div style="z-index: 0; 디스플레이: flex;"> //화면 내용 </div> <div style="z-index: -1; 디스플레이: 없음;"> //화면 2의 내용 </div> <div style="z-index: -1; 디스플레이: 없음;"> //화면 3의 내용 </div></pre> <p>따라서 모든 화면 구성 요소는 기술적으로 렌더링되며 선택한 화면만 숨겨지지 않습니다. </p> <p>제가 원하는 것은 항상 하나의 화면만 렌더링하고 다른 화면은 숨겨지지 않는 것입니다. 사용자가 다른 화면으로 "탐색"하면 사용자가 이동하는 페이지에 따라 이 화면의 콘텐츠가 변경되기를 원합니다. </p> <p>Twitter의 작동 방식은 페이지의 콘텐츠가 포함된 <code><main></main></code> 그에 따라 컨테이너 내용. 트위터는 React-Native를 사용하므로 이를 수행할 수 있는 방법이 있어야 합니다. 이를 수행하는 사실상의 방법보다는 최소한 준공식적인 방법이 있었으면 좋겠습니다. 'React-Navigation' 문서를 검색했지만 비슷한 설명을 찾지 못했습니다. </p> <p><strong>요약하자면: </strong>React-Navigation은 화면이 동시에 존재하도록 "스택"하지만 스택의 "맨 위에" 있는 화면만 표시됩니다. 저는 하나의 화면만 사용하고 사용자가 탐색하는 페이지에 따라 해당 화면의 콘텐츠를 변경하는 방법을 찾고 있습니다. </p> <p>React-Navigation에 대한 문서를 검색하여 내가 찾고 있는 것과 유사한 동작에 대한 설명을 찾으려고 노력했지만 아무 것도 찾지 못했습니다. 제가 설명한 것보다 더 많은 기능을 수행하는 더 나은 React 탐색 라이브러리가 있다면 그것을 지적하고 싶습니다. </p>
P粉141911244P粉141911244499일 전502

모든 응답(1)나는 대답할 것이다

  • P粉788765679

    P粉7887656792023-08-18 14:54:31

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

    솔루션

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

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

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

    제한사항

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

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

    회신하다
    0
  • 취소회신하다