화면 간 이동하기

애플리케이션은 대부분 하나의 화면으로 구성되지 않고 여러 화면을 만들고 전환하면서 만들어집니다.

그래서 이번에는 여러 화면을 만들고 화면 전환을 하는 기능을 정리해 보겠습니다.

우선 react-navaigation에 대한 라이브러리를 먼저 구현해야 합니다.

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

그리고 종속성 설치를 합니다.

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

Page 전환 기능 구현하기

이제 앱 전체를 NavigationContainer로 감싸야 Navigator를 구현할 수 있습니다. 다음과 같이 App.js를 수정합니다.

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

const App = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator initialRouteName='Home'>
            <Stack.Screen
                name="Home"
                component={Home}
                options={{ title: 'Welcome' }}
            />
            <Stack.Screen
                name="Profile"
                component={Profile}
            />
            </Stack.Navigator>
        </NavigationContainer>
    );
};

export default App;

위 코드들은 Home 컴포넌트와 Profile 컴포넌트를 Navigation Stack에 올려두고 Name을 이용해 화면 전환을 할 수 있도록 해두는 방법입니다.

그리고 Stack.Navigator에 있는 initialRouteName에 해당 스크린의 이름을 입력하면 해당 스크린이 기본 화면이 됩니다.

페이지 전환을 할 때는 props로 전달받은 navigation을 이용해 다음과 같이 전환을 구현합니다.

const Home = ({ navigation }) => {
  return (
      <Button
          title="Home Title"
          onPress={() =>
              navigation.navigate('Profile') // Profile 페이지로 이동
          }
      />
  );
};

const Home = ({ navigation }) => {
    return (
        <Button
            title="Home Title"
            onPress={() =>
                navigation.push('Profile') // Profile 페이지로 이동
            }
        />
    );
};

navigate vs push

• navigation.navigate는 화면을 이동할 때 새로운 화면을 스택에 쌓지 않고 바로 전환하는 방법입니다. 그래서 뒤로 가기를 하면 첫 화면으로 돌아갑니다.

• navigation.push는 화면을 이동할 때 새로운 화면을 스택에 쌓고 전환하는 방법입니다. 그래서 뒤로 가기를 하면 스택에 있는 이전 화면으로 돌아갑니다. 예를 들어 A -> B -> C 순서대로 화면을 전환하면 뒤로 가기 할 때 C 화면에서 B 화면, B 화면에서 A 화면으로 돌아갑니다.

뒤로 가기 구현

• navigation.pop() : 스택에 있는 이전 화면으로 이동하는 방법입니다.

• navigation.popToTop() : 첫 화면으로 이동하는 방법입니다.

<Button title="이전 화면" onPress={() => navigation.pop()} />
<Button title="첫 화면" onPress={() => navigation.popToTop()} />

파라미터 전달

페이지를 이동할 때 아래 코드와 같이 두 번째 매개변수로 파라미터를 전달할 수 있습니다.

navigation.navigate('page_name', {param: params_value});
navigation.push('page_name', {param: params_value});

그리고 컴포넌트에서 파라미터를 받을 때는 다음과 같이 받을 수 있습니다.

function Home({route}) {
    return (
        <View>
            <Text>{route.params.id}</Text>
        </View>
    )
}