React Navigation

사용 이유

react native에서 화면 전환 기능을 사용하기 위해서는 navigation을 이용해야한다. router와 기능이 유사하지만 react native는 router를 사용하지 못하기 때문이다. react native에서 쓰이는 라우터의 종류가 여러가지 있으나, 그 중에서 가장 많이 쓰이는 것은 react navigation이다. react navigation은 공식 문서도 존재할 뿐만 아니라, 많은 사람들이 사용하고 있어 오류를 해결하기 수월하다.

 

원리

스택에 화면을 쌓아두어, 필요할 때 이 스택안에서 이동할 수 있다. 하지만, 스택 안에서 이동할 경우 이전 페이지를 유지할 수 있지만, 돌아갔을때, 화면을 reloading 하지 못하는 단점이 있다.

 

설치

yarn add react-navigation
npm install react-navigation

yarn add @react-navigation/native
npm install @react-navigation/native

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

---

Stack

yarn add @react-navigation/stack
npm install @react-navigation/stack

createStackNavigator

screen과 navigator 객체를 리턴

navigator는 screen을 자식 요소로 포함하고, 여러 screen을 자식 요소로 삼을 수 있음

 

NavigationContainer

navigator tree와 여러 navigation들을 포함

최상위 루트에 속하므로 주로 App.js에서 사용

 

 

Navigator

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

intialRouteName

App.js를 reload하거나 screen에서 변화를 시도할 때, 지정해준 screen으로 이동

 

Moving between screens

방법

navigate와 push를 이용

navigation.navigate('Details')
navigation.push('Details')

 

navigate vs push

navigate는 먼저 동일한 route 객체가 있는지 확인해서 있으면 해당 route로 이동하고, 없으면 route를 스택에 새로 쌓음

push는 무조건 route를 스택에 새로 쌓음

∴ 지나온 루트를 순차적으로 기록하기 위해선 push를 쓰는 것이 나음

 

※ navigate를 써서 무조건 스택에 넣으려면?

navigate({routeName: ‘MyRoute’, key: data.uniqueId, params: data})