기본적인 Stack Navigator

다양한 네비게이션 중 가장 기본적인 Stack Navigator(이하 스택 네비게이터)를 다룬다.
전에 다운받았던, /native 라이브러리는 navigator(이하 네비게이터)의 가장 근간이 되는 요소들을 담고 있다.
그리고 각 네비게이터들은 각자의 라이브러리를 가진다.

라이브러리 설치하기

스택 네비게이터는 /native-stack 라이브러리를 설치해서 구현할 수 있다.

npm install @react-navigation/native-stack

@react-navigation/native-stack 라이브러리는 react-native-screens에 의존하기 때문에 꼭 올바르게 설치해야 한다.

스택 네비게이터

createNativeStackNavigator

• Screen과 Navigator를 리턴하는 함수이며, 리턴되는 객체 모두 React component이다.
• Navigator는 항상 Screen 엘레멘트를 포함해야 한다.

NavigationContainer

• 네비게이션 트리구조를 관리하고 navigation state를 포함한다.
• 다른 모든 네비게이터들을 감싸고 있어야 한다.

// In App.js in a new project

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

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>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

이제 두개의 컴포넌트로 구성된 네비게이터가 나온다.

Screen 컴포넌트의 props

1. name: 네비게이션에서 이동할 때 쓰이는 이름이다.
2. component: 해당 Screen에서 렌더링되는 컴포넌트이다.
3. options: 해당 Screen의 옵션을 객체로 지정한다.

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

• 만약, 네비게이터의 전체 스크린에 대해서 옵션을 적용하고 싶으면 네비게이터의 props로 screenOptions를 전달한다.