React-Navigation

React-Navigation

1개의 화면으로 동작하는 App은 거의 찾아볼 수 없다. 상태와 동작에 따라 화면을 전환해주는 무언가가 필요한데 이런 화면간 이동을 도와주는 라이브러리가 React Navigation이다. Navigation은 stack 구조로 되어있어서 화면을 이동하면 전 화면이 사라지는 것이 아니라 기존의 화면 위에 새로운 화면이 쌓이는 구조로 되어있다.

설치: Installing stack navigator library

npm install @react-navigation/

Creating a stack navigator

• Screen과 Navigator 속성을 포함하는 객체를 반환하는 함수
• Screen과 Navigator 는 navigator를 구성하는데 사용되는 리액트 컴포넌트
• Navigator는 Screen을 child로 반드시 포함하고 있어야 한다.

NavigationContainer

navigation tree를 관리하고, navigation state를 포함하는 컴포넌트
모든 naviagator 구조들을 감싸고 있어야 한다.
보통 App.js에 render된다.

📍네비게이션의 트리

const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator<RootStackParamList>();

return isLoggedIn ? (
    <Tab.Navigator>
      <Tab.Screen
        name="Orders"
        component={Orders}
        options={{title: '오더 목록'}}
      />
      <Tab.Screen
        name="Delivery"
        component={Delivery}
        options={{title: '내 오더'}}
      />
      <Tab.Screen
        name="Settings"
        component={Settings}
        options={{title: '내 정보'}}
      />
    </Tab.Navigator>
  ) : (
    <Stack.Navigator>
      <Stack.Screen
        name="SignIn"
        component={SignIn}
        options={{title: '로그인'}}
      />
      <Stack.Screen
        name="SignUp"
        component={SignUp}
        options={{title: '회원가입'}}
      />
    </Stack.Navigator>
  );
}

공식문서 참고하면서 이해하니깐 조금씩 이해가 간다. 하지만 계속 보고 또 보고 하는 중이다.🤔