Chapter11 Expo Navigation Error.

리액트 네이티브에는 3종류의 네비게이션이 있다고 합니다. 리액트 네비게이션에 대해서 네비게이션을 사용하기 전에 항상 공식문서를 읽어보고 시작하는 것을 잊지마세요.

• Tab Navigation

  모든 탭이 스크린을 render 해야하는 네비게이션

• Stack Navigation

  무언가가 스택처럼 쌓여서 앞으로 올라오도록 만드는 네비게이션

• Drawer Navigation

  Android에서 많이 보이는 사이드에서 올라오는 네비게이션

이번시간에서 정리할 내용입니다.

• NavVontainer
  
• AuthNavigation
  
• MainNavigation
  
• Navigation Scope
  

NavContainer

components/NavController.js

import React from "react";
import { View } from "react-native";
import { useIsLoggedIn } from "../AuthContext";
import AuthNavigation from "../navigation/AuthNavigation";
import MainNavigation from "../navigation/MainNavigation";

export default () => {
  const isLoggedIn = true;
  return (
    <View style=>
      {isLoggedIn ? <MainNavigation /> : <AuthNavigation />}
    </View>
  );
};

로그인 확인 과정은 NavContainer로 옮겨 줍니다. 그리고 나서 로그인 체크 여부에 따라 MainNavigation에 접근시킬 지 AuthNavigation으로 보낼지 설정해 줍니다.

Navigation Error

기존의 Code는 createStackNavigator / createBottomTabNavigator 를 둘다 “react-navigation”에서 불러와 사용하였지만 navigation의 규모가 커짐에 따라 Stack Navigator와 Tab Navigator를 다 분리하였습니다. 이러한 측면이 관리나 개발에서 양방향 모두 이점이 많다고 판단한 것 같습니다.

CreateStackNavigtor
import { createStackNavigator } from "react-navigation-stack";

CreateBottomTabNavigator
import { createBottomTabNavigator } from "react-navigation-tabs";

위는 변경된 사항입니다.

Navigation 구조

노마드의 구조를 보면 Navigation의 2가지의 종류를 계속해서 사용합니다. StackNavigation과 TabNavigation의 두가지로 서로 병합하여 많이 사용하고 있습니다. 아래는 간략하게 나타낸 구조입니다.

Bottom Tab Navigation은 여러가지의 화면을 가지고 있고 Meassage를 보낼 수 있는, 즉, DM을 날리는 네비게이션은 다시 Stack Navigation안으로 들어가게 됩니다. 이렇게 복잡한 네이게이션을 나타낼 때에는 구조를 잘 짠 다음 네비게이션을 설정하는 것이 중요합니다.

TabNavigation

• Home
• Search
• Notifications
• Profile

PhotoNavigation(topTabNavigation)

• photoTabs
  • TakePhoto
  • selectPhoto
• UpLoad(image uploade Component)

MessagesNavigation

• Messages
• Message

네이게이션은 NavigationOptions에서 Props로 navigation을 쓸 수 있습니다. 이것을 쓰면 Route로 이동이 가능합니다.

   navigationOptions: {
      tabBarOnPress: ({ navigation }) => {
        navigation.navigate("MessageNavigation");
      }
    }

navigation.navigate(여기) 여기 부분에서 정의된 Route를 설정하시면 이동이 가능합니다. 보통 OnPress랑 같이 주어 클릭하였을 때 이동하는 것이 기본입니다.

참고자료

• academy.nomadcoders.InstagramClonCoding