[React Native/Expo] React navigation 이란?

 

React navigation

리액트 네이티브에 네비게이션 기능을 간단하게 만들 수 있다! ( 페이지 탐색 메뉴 )

 

React Native란?

[React Native] React Native란?

 

설치

npm install @react-navigation/native

 

expo managed 프로젝트 사용시 설치

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

 

expo bared 프로젝트 사용시 설치

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

 

스택형 네비게이션 사용시 설치

npm install @react-navigation/stack

 

 

스택형 네비게이션의 특징

새로운 창을 열면, 기존의 열려있던 창 위로 겹겹히 쌓인다.

순서대로 뒤로 돌아갈 수 있다.

 

스택형 네비게이션 사용법

// App.tsx

import React from "react";
import { NavigationContainer } from "@react-navigation/native"; // 전체 네비게이션을 감싸는 컨테이너 불러오기
import { createStackNavigator } from "@react-navigation/stack"; // 스택 네비게이션 라이브러리 불러오기

// 각각 보여줄 화면들 불러오기
import Welcome from "../screens/Welcome";
import Login from "../screens/Login";

// 스택 네비게이션 만들기
const Stack = createStackNavigator();

/*
  NavigationContainer을 사용해, 전체 네비게이션을 감싼다.
  Stack.Navigator을 사용해, 스택 네비게이션으로 보여줄 화면을 감싼다.
  Stack.Screen을 사용해, 스택 네비게이션으로 보여줄 화면(React 컴포넌트 형식)을 지정해준다.
  
  스택 네이게이션은, 기본적으로 맨위에 작성한 화면을 보여준다. (메인화면)
*/
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Welcome" component={Welcome} />
        <Stack.Screen name="Login" component={Login} />
      </Stack.Navigator> 
    </NavigationContainer>
  )
}

 

//Welcome.tsx

import React from "react";
import { Text, View, TouchableOpacity } from "react-native";

/*
  스택 네이게이션으로 지정된 컴포넌트는, 여러가지 요소(props)가 주어지는데,
  navigation을 사용하면, 네비게이션으로 지정된 여러가지 화면으로 이동 할 수 있다.
*/

export default function Welcome({ navigation }: any) {
  // navigation.navigate("스택 네이게이션 컴포넌트 name")을 사용해, 화면 이동
  return (
    <View>
      <Text>Welcome</Text>
      <TouchableOpacity onPress={() => navigation.navigate("Login")}>
        <Text>Go to Login</Text>
      </TouchableOpacity>
    </View>
  );
}

 

//Login.tsx

import React from "react";
import { Text, TouchableOpacity, View } from "react-native";

export default function Login({ navigation }: any) {
  return (
    <View>
      <Text>Login</Text>
      <TouchableOpacity onPress={() => navigation.navigate("Welcome")}>
        <Text>Go To Welcome</Text>
      </TouchableOpacity>
    </View>
  );
}

 

메인으로 보여지는 welcome 화면

Go To 버튼을 눌러서 화면을 이동한 모습

 

 

스택 네비게이션 옵션 ( 추가중 )

 

네비게이터 전용 옵션 ( Navigator )

옵션 이름	설명	사용법
initialRouteName	메인 화면을 설정	<Stack.Navigator initialRouteName="화면이름">
screenOptions	모든 화면에 설정 적용	<Stack.Navigator screenOptions={{옵션명:옵션}}>

 

네비게이터, 스크린 공용 옵션 ( Navigator & Screen )

옵션 이름	설명	사용법
mode	화면 이동 스타일 설정	<Stack.Navigator mode="modal">
headerMode	화면 이동시 헤더 스타일 설정	<Stack.Navigator headerMode="screen">

 

스크린 전용 옵션 ( Screen )

옵션 이름	설명	사용법
title	화면의 제목을 설정	<Stack.Screen options={{ title : "제목" }}>
headerShown	헤더 표시 여부 설정	<Stack.Screen options={{ headerShown : true }}>
headerBackTitleVisible	헤더 뒤로가기 표시 여부 설정	<Stack.Screen options={{ headerBackTitleVisible : true }}>
headerTintColor	헤더 색상 설정	<Stack.Screen options={{ headerTintColor : "색상" }}>

 

옵션 상세 설명

옵션 이름	옵션 종류	설명
mode	card	새로운 화면을 오른쪽에서 가져온다.
	modal	새로운 화면을 아래쪽에서 가져온다.
headerMode	float	화면 이동시, 헤더의 텍스트만 바뀐다. ( fade-in-out 애니메이션 )
	none	헤더를 표시하지 않는다.
	screen	화면 이동시, 헤더도 한몸처럼 같이 움직인다.

 

옵션 사용예시

// App.tsx

// ...중략

export default function App() {
  // Navigator의 initialRouteName 요소를 사용해, 메인화면을 마음대로 설정
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Login">
        <Stack.Screen name="Welcome" component={Welcome} />
        <Stack.Screen name="Login" component={Login} />
      </Stack.Navigator> 
    </NavigationContainer>
  )
}

 

// App.tsx

// ...중략

export default function App() {
  /*
    headerMode 옵션을 사용해, 화면이동시 헤더변환 방식을 설정
    Navigator에 적용한 옵션은 모든 화면에 적용되고,
    Screen에 적용한 옵션은, 설정된 화면에만 적용된다.
  */
  
  return (
    <NavigationContainer>
      <Stack.Navigator headerMode="screen">
        <Stack.Screen name="Welcome" component={Welcome} />
        <Stack.Screen 
          name="Login" 
          component={Login}
          options={{
            headerMode: "float"
          }}
        />
      </Stack.Navigator> 
    </NavigationContainer>
  )
}

 

네비게이션 중첩시 주의 사항

useNavigation().navigate() 메서드 사용시,

현재화면과, 이동하려는 화면이 "동일한 네비게이터"에 있어야 한다. 

The action 'NAVIGATE' with payload {} was not handled by any navigator.