React Native Navigation

ブログ記事...どう書けばいいか悩んで1ページずつ整理してだから1つ目は네비게이션!

React Native Navigation

Web開発だけでなく、アプリケーションの開発を開始する際に最もよく知られていないのはNavigationです.Stack-Navigation, Bottom-Tab-Navigation... などなど.ネットワークはUrlを交換すればいいです.😭
アプリケーションはアニメーションにも注意しなければならないのでfade modelなど...動作の仕方は多種多様である.横または上へ...
実はナビゲーション構造を始めたばかりの頃、授業を聞いてから始まり、最初はめちゃくちゃでした.そしてログインを実現…!ナビゲーション構造は本当に普通で、私はそれを意識して、変わりました.
最初はRoot Navigationファイルもなくて、本当におかしくなって、ほほほ
いつか大変なことになった気がします.会員になってホームページに戻ったときに後ろに行けるので会員加入画面に戻ったとき…?🤯
メールリンクのナビゲーションは大体4種類あります.독자, 작가, 회원가입, 온보딩1.登録履歴のないデバイスで회원가입にナビゲートします.
2.会員加入が完了したプレイヤー&&選択されていないプレイヤーは온보딩に移動します.
3.プレイヤータイプが特定されたら、タイプ別に독자、작가に移動してナビゲートする.
読者、著者はbottom tabを必要とするため、tabナビゲーションとスタックナビゲーションの2つの部分から構成されている.
コードを見てみましょう.

//Root.js파일
<RootNav.Navigator
      screenOptions={{headerShown: false, presentation: 'card'}}>
      {!props.isLogged ? (
        <RootNav.Group>
          <SignUpNav.Screen name="SignUpStacks" component={SignUpStacks} />
          <OnBoardingNav.Screen
            name="OnBoardingStacks"
            component={OnBoardingStacks}
          />
        </RootNav.Group>
      ) : props.isReader === 'Not Decided' ? (
        <RootNav.Group>
          <OnBoardingNav.Screen
            name="OnBoardingStacks"
            component={OnBoardingStacks}
          />
        </RootNav.Group>
      ) : props.isReader === 'READER' ? (
        <RootNav.Group>
          <ReaderNav.Screen name="ReaderTabs" component={ReaderTabs} />
          <ReaderNav.Screen name="ReaderStacks" component={ReaderStacks} />
        </RootNav.Group>
      ) : (
        <RootNav.Group>
          <AuthorNav.Screen name="AuthorTabs" component={AuthorTabs} />
          <AuthorNav.Screen name="AuthorStacks" component={AuthorStacks} />
        </RootNav.Group>
      )}
    </RootNav.Navigator>

Root.jsファイルは、すべてのナビゲーションのルートファイルです.propsでisLogged, isReaderを伝えます.isLoggedとはログインの有無、isReaderとはユーザタイプを指す.navigation groupを用いて,上記3つの状況に基づいて近接可能なナビゲーションを決定した.
これでナビは終了…~!
そうかと思ったら、また修正するものがありました.
機能的には問題ありませんが、常にユーザーログイン時に作者インタフェースを介してユーザーインタフェースに移動します.作者の画面は0.5秒くらい表示されているようで、これはちょっと目障りです.
ざっと見ると、isReaderがREADERに設定されていない場合、Root.jsがレンダリングされ、作家ナビゲーション画面が現れた後にREADERに設定され、その後読者ナビゲーション画面に移動する.したがって,App.jsコードを簡単に修正して解決した.

//App.js
{(isLogged && isReader) || token === null ? (
                <Root isLogged={isLogged} isReader={isReader} />
              ) : null}

isLogged、isReader、login tokenがまだ値していない場合はrootの代わりにnullを使用します.
このように整理するのは簡単そうで、ナビゲーション構造を変えるだけで丸1日かかりました.ㅠㅠ最初は概念がない場合に,盲目的にコードを記述して挿入したようである.次回から本格ドキュメントをしっかり読みます^~^