3. @react-navigation/native

react-native에서 navigtion을 사용하기 위해서 @react-navigation/native를 이용한다.

 

먼저 설치부터,,

 

Getting started | React Navigation

https://reactnavigation.org/docs/getting-started/

 

yarn add @react-navigation/native

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

 

Hello React Navigation | React Navigation

https://reactnavigation.org/docs/hello-react-navigation/

 

yarn add @react-navigation/stack

 

 

Moving between screens | React Navigation

https://reactnavigation.org/docs/navigating/

<이런식으로 스택네이게이터를 사용하는 경우>

const Stack = createStackNavigator();
Stack.Navigator initialRouteName="Home"> 
<Stack.Screen name="Home" component={HomeScreen} options={{ title: "Home" }} />

navigation.navigate : 창으로 이동하고, 쌓이지는 않는 형태

navigation.push : 창이 쌓이는 형태