ReactNative 리액트 네이티브 : 리액트 네비게이션 설정

 

 

포스팅에선 react-navigation 라이브러리 사용 예정.

 

yarn add @react-navigaiton/native

react-navigation 설치

 

yarn add react-native-screens react-native-safe-area-context

react-navigation 의존 라이브러리 설치

 

IOS 테스트를 한다면,

npx pod-install

 

 

1. 리액트 네이티브 내비게이션 설정

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

function App() {
	return <NavigationContainer> ... </NavigationContainer>
}

export default App;

 

 

... 안에 내비게이션 설정을 JSX로 선언이 가능하다.

 

기존 웹의 경우, 웹 브라우저에 탑재되어있는 히스토리 기능을 통해 앞, 뒤로 이동이 가능하다

리액트 네이티브에서도 이와 비슷한 기능을 제공하기 위해 네이티브 스택 내비게이터를 사용한다

 

yarn add @react-navigation/native-stack

 

 

2. 네이티브 스택 내비게이터 설정

import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import FirstScreen from '..';

const Stack = createNativeStackNavigator();

function App() {
    return (
        <NavigationContainer>
            <Stack.Navigator>
            	<Stack.Screen name="First" component={FirstScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    )
}

export default App;

 

 

createNativeStackNavigator 함수를 이용하여 Stack이란 객체를 생성하면 Stack.Navigator와 Screen 컴포넌트 사용이 가능하다.

Screen에서 name은 컴포넌트에서 설정된 화면 이름을 설정하는 Props이다

(다른 화면 이동하거나 현재 화면을 조회할 때 사용)

 

 

3. 리액트 네이티브 화면 전환

..

function FirstScreen({navigation, route}) {
..

<Button  title="버튼" onPress={() => navigation.navigate('Button', {id: route.params.id})} />

<Button  title="버튼" onPress={() => navigation.push('Button', {id: route.params.id})} />

}

 

화면을 이동할 경우, navigation 객체를 Props로 받아와서 사용할 수 있으며

두 가지 방법이 존재한다.

* 라우트 파라미터는 객체 타입으로 설정하며 navigate, push의 두 번째 인자로 설정한다.

 

. navigate : 새로 이동하는 화면이 현재 화면과 같다면 새로운 화면을 쌓지 않고 화면의 파라미터만 변경

. push : 새로운 화면이 스택에 쌓여가며 화면 전환이 이루어짐

 

 

뒤로 가기의 경우엔

바로 이전 화면으로 이동하려면 navigation.pop()

아예 첫 화면으로 이동하려면 navigation.popToTop() 함수를 호출한다.