React Navigation

Hello React Navigation

웹에서는 a태그를 이용해서 쉽게 다른 페이지로 이동이 가능하다. 사용자가 링크를 클릭하면 해당 링크의 URL은 브라우저의 history 스택에 push된다. 사용자가 뒤로가기 버튼을 누르면, 브라우저는 현재 페이지를 stack에서 pop하고 그 아래에 있던 이전 페이지가 브라우저에 노출된다. 리액트 네이티브는 이와 같은 웹의 내부 기능을 사용할 수 없기 때문에 React Navigation과 같은 라이브러리가 필요하다.

 

React Navigation의 네이티브 스택 네비게이터는 앱의 화면간 전환과 네비게이션 히스토리 관리 기능을 제공한다. 만약 하나의 스택 네비게이터만 사용한다면 웹과 개념적으로 비슷한 구조를 구축할 수 있다. React Navigation의 스택 네비게이터가 웹의 그것과 다른 점이 있다면 그것은 React Navigation은 제스쳐와 애니메이션 기능을 제공한다는 것이다.

Installing the native stack navigator library

native stack navigator를 사용하기 위해서는 먼저 아래 명령어를 통해 패키지를 설치해야 한다.

npm install @react-navigation/native-stack

Creating a native stack navigator

createNativeStackNavigator는 Screen과 Navigator라는 이름을 가진 두 가지 객체를 반환한다. 이 두 객체는 모두 네비게이터를 설정하기 위한 리액트 컴포넌트이다. Navigator는 반드시 Screen 컴포넌트를 자식으로 두어야 한다.

NavigationContainer는 네비게이션 트리와 네비게이션 상태를 관리하기 위한 컴포넌트이다. 이 컴포넌트는 모든 네비게이터 구조를 감싸기 때문에 주로 최상위 컴포넌트인 App.js에서 렌더링 한다.

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

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

export default App;

Configuring the navigator

모든 라우터 설정은 네비게이터의 속성에서 정해진다. 만약 아무 속성도 전달하지 않는다면 자동으로 기본 설정이 된다.

스택 네비게이터에 두 번째 화면을 추가하고 Home 스크린이 먼저 렌더링 되도록 설정해보자.

function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

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

이제 스택은 Home과 Details 두 개의 경로를 갖는다. 경로는 Screen 컴포넌트를 통해 특정된다. Screen 컴포넌트는 네비게이팅에 사용되는 name이라는 속성과 렌더링 할 컴포넌트를 지정하는 component라는 속성을 갖는다.

또한 Navigator 컴포넌트의 initialRouteName 속성을 통해 먼저 렌더링될 컴포넌트를 지정할 수 있다.

Moving between screens

이전에 우리는 Home과 Details두 개의 라우터를 생성해봤지만 그 둘 사이를 어떻게 이동하는지는 배우지 않았다. 웹에서는 일반적으로 window.location 객체를 통해서 페이지간 이동을 하지만 React Navigation에서 우리는 navigation 속성을 통해 스크린 컴포넌트를 전달한다.

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

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>
  );
}

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Button
        title="Go to Details... again"
        onPress={() => navigation.push('Details')}
      />
      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
      <Button title="Go back" onPress={() => navigation.goBack()} />
      <Button
        title="Go back to first screen in stack"
        onPress={() => navigation.popToTop()}
      />
    </View>
  );
}