React Navigation

react-navigation는 화면을 설정할 수 있는 독립 실행형 라이브러리이다.

설치 방법은 아래와 같다.

npm install @react-navigation/native @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context

yarn add @react-navigation/native @react-navigation/native-stack
yarn add react-native-screens react-native-safe-area-context

iOS의 경우 Cocoapods가 설치되어있는지 확인하고 설치를 완료한다.

npx pod-install ios

전체 앱을 NavigationContainer로 감싸줘야한다.

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

const App = () => {
	return (
    	<NavigationContainer>
        	...
        </NavigationContainer>
    );
};

export default App;

각 컴포넌트들의 화면을 앱으로 만들 수 있다.

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

const Stack = createNativeStackNavigator();

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

options의 prop에서 각 화면의 제목과 옵션을 설정할 수 있다.
각 화면은 component React 구성 요소인 소품을 사용한다. 이러한 구성 요소는 navigation의 다른 화면에 연결할 수 있는 다양한 메서드가 있는 props를 받을 수 있다.

const HomeScreen = ({ navigation }) => {
  return (
    <Button
      title="Go to Jane's profile"
      onPress={() =>
        navigation.navigate('Profile', { name: 'Jane' })
      }
    />
  );
};
const ProfileScreen = ({ navigation, route }) => {
  return <Text>This is {route.params.name}'s profile</Text>;
};

native-stack은 네비게이터는 iOS의 UINavigationsController 및 안드로이드의 Fragment에서 기본 API를 사용하므로 빌드 된 createNativeStackNavigator가 해당 API 위에 기본적으로 빌드 된 앱과 동일하게 작동하고 동일한 성능 및 특성을 갖는다.