React Navigation | React Navigation

react-navigation는 화면을 설정할 수 있는 독립 실행형 라이브러리로, JavaScript, React 및 React Native에 이미 익숙하다면 React Navigation을 사용하여 빠르게 이동할 수 있습니다.

Getting started | React Navigation

패키지 설치

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

안드로이드 세팅

MainActivity.kt

class MainActivity: ReactActivity() {
  // ...
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(null)
  }
  // ...
}

이 파일 상단의 패키지 설명 아래에 다음 import 문을 추가합니다.

import android.os.Bundle;

프로젝트 세팅

프로젝트 루트 앱에서 NavigationContainer을 으로 한번 감싸줍니다.

App.tsx

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

export default function App() {
  return (
    <NavigationContainer>
			{/* Rest of your app code */}
		</NavigationContainer>
  );
}

Screen의 두가지 형태

const Stack = createNativeStackNavigator<RootStackParamList>();

<Stack.Screen. // 페이지라고 생각하기 
  name="Home"
  component={HomeScreen}
  options={{title: 'Overview'}}
/>

<Stack.Screen name="Details">
    {props => <DetailsScreen {...props} />}
  </Stack.Screen>
</Stack.Navigator>