리액트 네비게이션

정재성·2022년 6월 27일

reactnative

1 .리액트네비게이션

리액트 네비게이션 라이브러리는 리액트 네비게이션을 쉽고 간단하게 관리할수 있도록 도와준다

지원하는 네비게이션의 종류는 세 종류이다

stack 네비게이션

tab 네비게이션

drawer 네비게이션

1-1 내비게이션 구조

리액트 내비게이션에는 NavigationContainer컴포넌트 , Navigator컴포넌트 Screen컴포넌트가 있다.

Screen컴포넌트

화면으로 사용되며 , name과 component의 속성을 지정해야한다. name은 화면 이름으로 사용되고 component에는 화면으로 사용될 컴포넌트를 전달해야한다. 항상 navigation과 route가 props로 전달된다.

Navigator 컴포넌트

화면을 관리하는 중간 관리자의 역활로 내비게이션을 구성하며 여러개의 Screen컴포넌트를 자식으로 갖고있다.

NavigationContainer 컴포넌트

내비게이션의 계층구조와 상태를 관리하는 컨테이너 역활을 하며 모든 네이게이션 구성요소를 감싼 최상의 컴포넌트이다.

2 .스택내비게이션

일반적으로 가장 많이 쓰이는 내비게이션으로 , 현재 화면위에 다른 화면을 쌓으면서 화면을 이동하는 것이 특징 화면 위에 새로운 화면을 쌓으면서 (push) 이동하기 때문에 이전 화면을 계속 유지한다
가장 위에 있는 화면을 들어내면 이전 화면으로 돌아 갈 수 있다.

2-1 화면구성

screen 폴더 밑에 스택 네비게이션으로 사용 할 화면을 만든다.

(src/screen/Home.js)

예를들어, 첫 화면으로 사용할 Home 화면을 작성했다면 화면을 확인하기 위한 다음 화면인 List 화면으로 이동하기 위한 버튼으로 화면을 구성했다고 하자

마지막 목록의 상세 정보를 보여주는 컴포넌트를 작성한다 (Item)

이제 navigation폴더 안에 Stack.js 파일을 생성하고 생성된 컴포넌트를 이용해 스택 네비게이션을 구성해본다.

///src/navigation/Stack.js

import React from 'react'
import { createStackNavigator } from @react-navigation/stack
import Home from ../screen/Home
import List from ../screen/List
import Item from ../screen/Item

const Stack = createStackNavigator();

const StackNavigation = () => {
  return (
    <Stack.Navigator>
    	<Stack.Screen name="Home" component={Home}
		<Stack.Screen name="List" component={List}
		<Stack.Screen name="Item" component={Item}
    <Stack.Navigator>
          );
};

export default StackNavigation

가장 먼저 createStackNavigator 함수를 이용해서 스택 네비게이션을 생성한다. 생성 된 스택 네비게이션에는 화면을 구성하는 Screen 컴포넌트와 Screen 컴포넌트를 관리하는 Navigator 컴포넌트가 있다.

Navigator 컴포넌트 안에 Screen 컴포넌트를 자식 컴포넌트로 작성하고 , 앞에서 만든 컴포넌트를 Screen 컴포넌트의 Component로 지정한다. name에는 화면의 이름을 작성하는데 Screen컴포넌트의 name은 반드시 서로 다른 값을 가져야한다.

이제 App컴포넌트에서 완선된 스택 네비게이션을 사용한다.

import React from 'react'
import {NavigationContainer} from @react-navigation/native
import StackNavigation from './navigation/Stack'

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