[React Native] navigation (화면설정과 이동)

React Native로 만든 App에서 화면 전환은 어떻게 해야할까?

 

Navigation

 

React Native에서는 화면전환을 위해 navigation을 제공한다.

 

1. navigation 설치

react-navigation과 stack navigation을 설치한다(stack을 사용하는 경우)

npm install @react-navigation/native @react-navigation/native-stack

expo를 사용한다면 expo install로 react-native-screens와 react-native-safe-area-content도 같이 설치해준다.

expo install react-native-screens react-native-safe-area-context

 

2. NavigationContainer, Navigator

navigation이 작동하기 위해서는 NavigationContainer, Navigatior, Screen 세 가지 요소가 필요하다.

기본적인 구조는 아래와 같다.

import React from 'react';
import { NavigationContainer, createNativeStackNavigator } from '@react-navigation/native';
 
const Stack = createNativeStackNavigator();
 
const Navigation = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        {/* 이 안에 Screen이 있어야한다 */}
      </Stack.Navigator>
    </NavigationContainer>
  );
};
 
export default Navigation;

import한 NavigationContainer안에 createNativeStackNavigator()으로 만든 Stack.Navigatior가 있어야 한다.

Stack.Navigator안에는 Stack.Screen이 있어야 하는데, Screen으로 만든 화면이 아니면 이동할 수 없다.

 

3. Screen

HomeScreen과 DetailScreen을 만들어 두 화면으로 설정한다.

import { View, Text, Button } from 'react-native';
 
function HomeScreen() {
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}
 
function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}
 
const Navigation = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        {/* name, component 는 필수 props이다 */}
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

<Stack.Screen />은 name과 component라는 필수 props를 가진다.

name은 다른 화면으로 이동할 때 필요한 이름이고, component는 나타낼 요소를 지정한다.

보통은 첫 번째 Stack.Screen 이 맨 처음에 나타나고, Stack.Navigator의 initialRouteName을 통해 지정할 수도 있다.

 

<Stack.Screen
    name="Home"
    component={HomeScreen}
    options={{ title: 'Overview' }}
/>

Stack.Screen의 options를 통해 여러가지 설정을 할 수 있다.

header, title, screen이 나타나는 형식까지 설정가능하다.

( stack navigator의 options 참고 : https://reactnavigation.org/docs/native-stack-navigator#options )

 

4. 다른 화면으로 이동하기

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

모든 Screen은 navigation이라는 prop를 자동으로 받는다. navigation을 이용해서 화면을 이동할 수 있는데, HomeScreen({ navigation }) 으로 꼭 적어둬야 화면 안에서 사용할 수 있다.

navigation에 있는 .navigate를 통해 화면을 이동할 수 있다. 이 때 이동하고자 하는 화면은 Navigator안의 Screen에서 name 으로 지정해둔 이름을 입력해주면 이동할 수 있다.(다른 이름은 불가능)

 

5. navigation의 이동에 관한 함수들(Stack Navigation)

.navigate( "RouteName" )	지정한 화면으로 이동한다
.replace( "RouteName" )	현재 화면을 지정한 화면으로 대체한다
.push( "RouteName" )	지정한 화면을 push한다(추가)
.pop()	이전 화면으로 돌아간다
.popToTop()	맨 처음 화면으로 돌아간다

navigation prop을 통해서 화면 이동 뿐만 아니라 여러가지 기능을 수행할 수 있다.

( navigation prop reference : https://reactnavigation.org/docs/navigation-prop/ )

 

 

참고한 사이트

https://reactnavigation.org/docs/native-stack-navigator#options

https://reactnavigation.org/docs/native-stack-navigator/

https://reactnavigation.org/docs/navigation-prop/

https://reactnavigation.org/docs/navigation-prop/

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

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