[React Native] 3. React Navigation

React Native는 웹이 아닌 모바일 앱 개발이다. 때문에 여러 화면으로 구성되어 있고 화면 전환을 쉽게 구현해야하는데 이때 네이게이션은 환면 전환을 위한 핵심 라이브러이다. 

 

React Native에서 네비게이션을 구현하기 위한 많은 라이브러리가 존재하는데 그중 가장 일반적인것이 React Navigation이다. 

 

React Navigation은 몇가지 장점을 제공한다. 

 

• 다양한 네비게이션 유형: Stack, Tab, Drawer 등 제공.
• 커스터마이징 가능: 헤더, 애니메이션, 전환 방식 등을 사용자 정의.
• iOS와 Android 모두 지원: 네이티브 스타일의 일관된 네비게이션 구현 가능.

 

 

1. 설치 방법

npm install @react-navigation/native react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated react-native-vector-icons

 

그리고 네이게이션 컨테이너를 사용하려면 추가로 설치해야하는 패키지

npm install @react-navigation/native-stack

 

후에 npm start로 재시작하면 된다.

 

설치가 완료되면 package.json 파일에 다음 의존성이 포함되어 있어야 한다.

"dependencies": {
  "@react-navigation/native": "...",
  "@react-navigation/native-stack": "...",
  "react-native-reanimated": "...",
  "react-native-screens": "...",
  "react-native-gesture-handler": "...",
  "react-native-safe-area-context": "...",
  "react-native-vector-icons": "..."
}

 

 

2. 스택 네이게이션 구현

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

const Stack = createNativeStackNavigator();

function HomeScreen({ navigation }) {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Home Screen</Text>
      <Button title="Go to Details" onPress={() => navigation.navigate('Details')} />
    </View>
  );
}

function DetailsScreen({ navigation }) {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Details Screen</Text>
      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
      <Button title="Go Back" onPress={() => navigation.goBack()} />
    </View>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="Home"
        screenOptions={{
          headerStyle: { backgroundColor: '#4caf50' },
          headerTintColor: '#fff',
          headerTitleStyle: { fontWeight: 'bold' },
        }}
      >
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 24,
  },
});

 

NavigationContainer

 

네이게이션의 루트 컨테이너이다. 모든 네비게이션 구조는 이 컴포넌트 안에 포함되어야한다. 

 

Stack.Navigator

화면 전환을 관리한다. 각 화면을 스택처럼 쌓아올리며, goBack()으로 뒤로 이동할수 있다.

 

Stack.Screen

각 화면을 정의하며, name 속성은 네비게이션 이름을 설정한다. 

component 속성은 해당 이름으로 표시할 컴포넌트를 지정한다. 

 

navigation 객체

화면 전환 및 조작을 위한 다양한 메서드를 제공한다.

 

• navigate('ScreenName'): 특정 화면으로 이동.
• goBack(): 이전 화면으로 돌아감.
• replace('ScreenName'): 현재 화면을 새로운 화면으로 대체.

 

3. 커스터마이징: 헤더와 화면 전환

헤더 스타일

screenOptions로 글로벌 헤더 스타일을 설정하거나, 각 Stack.Screen에 개별 스타일을 설정할 수 있습니다.

<Stack.Navigator
  screenOptions={{
    headerStyle: { backgroundColor: '#6200ee' },
    headerTintColor: '#fff',
    headerTitleStyle: { fontWeight: 'bold' },
  }}
>

 

 

애니메이션 커스터마이징

React Navigation은 화면 전환 시 기본 애니메이션을 제공하며, 필요하면 변경할 수 있습니다.

<Stack.Screen
  name="Details"
  component={DetailsScreen}
  options={{
    animationTypeForReplace: 'push', // 'push' or 'pop'
  }}
/>