RN(React-Native) 시작하기 4 - react-navigation 사용하기

react-navigation 설치

npm install --save @react-navigation/native // react-navigation 설치
npm install --save react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view // react-navigation 사용하기 위한 설치

Stack Navigation 설치

화면위에 화면이 쌓임 뒤로가기 클릭시 가장 위 화면 사라짐

npm install --save @react-navigation/stack

Drawer Navigation 설치

메뉴에 사용하는 Navigation 유저 스와이프 액션에 반응해서 나타남

npm install --save @react-navigation/drawer

Bottom Tab Navigation 설치

화면 하단 Tab 메뉴로 화면을 변경함

npm install --save @react-navigation/bottom-tabs

react-native-gesture-handler

react-navigation을 사용하기 위해서는 react-native-gesture-handler를 index 상단에 import 합니다

import 'react-native-gesture-handler';
...
...
...

NavigationContainer

App.tsx에서 컴포넌트에 감싸줍니다

...
...
return (
  <NavigationContainer>
    ...
    ...
    ...
  </NavigationContainer>
)

Stack Navigation 사용

...
import {
  createStackNavigator,
} from '@react-navigation/stack';
...
const Stack = createStackNavigator();
...
const LoginStackNavi = () => {
  return (
    <Stack.Navigator
      screenOptions={{
        headerStyle: {
          backgroundColor: '#f4511e',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      }}>
      <Stack.Screen
        name="SignIn"
        component={SignIn}
        options={{
          headerShown: false,
        }}
      />
      <Stack.Screen
        name="SignUp"
        component={SignUp}
        options={{headerBackTitleVisible: false}}
      />
      <Stack.Screen name="ResetPassword" component={ResetPassword} />
    </Stack.Navigator>
  );
};