React Native - Navigation(1). stack navigation

React Native Navigation

application은 여러 개의 화면을 가지며, 화면 이동과 상호작용으로 동작한다.
그렇다면 react native에서는 어떤 식으로 화면 이동을 하는가?? 

정답은 navigation을 이용하는 것이다.

 

Navigation이란?

화면이동을 관리하는 것이라 생각하면 된다. 필요한 화면들을 정의하고 액션이나 이벤트에 반응하여 원하는 화면을 출력해주는 기능을 한다.

그중, stack navigation 은 화면을 stack과 비슷하게 관리하는 것이다. stack은 LIFO의 자료구조이다. 즉 마지막에 들어온 것이 가장 먼저 나가는 원리이다. 화면들을 한층 한층 쌓아 올리고 위 층부터 빠져나간다고 생각하면 된다.

 

 

React Native Stack Navigation 사용법

1. navigation과 stack을 프로젝트에 설치해야 한다.

npm install @react-navigation/native @react-navigation/stack

 

2. 필요한 library를 설치한다.

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

 

3. index.js 제일 위에 아래의 코드를 삽입한다. ( 어떠한 코드도 이 코드위에 있으면 안 된다.)

import 'react-native-gesture-handler';

 

4. App.js를 아래와 같이 작성한다.

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="First"
          component={First}
          options={{title: 'First Screen'}}
        />
        <Stack.Screen name="Second" component={Second} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

 <NavigationContainer>는 Navigation을 담는 Container이다. 앱 상태를 관리하고 앱 환경을 연결하는 역할을 담당한다.
Stack은 stcakNavigator를 생성하여 저장한 변수이다. NavigationContainer에 Stack의 Navigator를 담아 사용할 것이다.
StackNavigator에는 Screen을 가지는데 이것이 사용할 화면이다. 
원하는 화면을 Screen으로 설정하면 액션에 맞게 화면을 출력할 수 있다.

아래는 Screen으로 설정한 First, Second 화면이다.

const First = ({navigation}) => {
  return (
    <View
      style={{
        flexDirection: 'column',
        flex:1,
        justifyContent: 'center',
        alignItems:'center',
      }}>
      <TouchableOpacity
        style={{
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          width: 50,
          height: 50,
        }}
        onPress={() => navigation.navigate('Second', {name: 'Second'})}>
        <Text>Click!!</Text>
      </TouchableOpacity>
    </View>
  );
};
const Second = () => {
  return <Text>This is Second Screen!!</Text>;
};

First, Second 모두 화살표 함수를 사용하여 작성하였는데 초기화면인 First에는 parameter로 navigation을 전달받는다.
<TouchableOpacity>는 Component를 터치가 가능하게 감싸주는 역할을 한다. 
onPress속성에 전달받은 navigation의 navigate함수를 설정하여 클릭 이벤트가 발생하면 'Second'로 설정해놓은 화면으로 이동된다. 

전체 코드이다.

import * as React from 'react';
import {TouchableOpacity, Text, View} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

const First = ({navigation}) => {
  return (
    <View
      style={{
        flexDirection: 'column',
        flex:1,
        justifyContent: 'center',
        alignItems:'center',
      }}>
      <TouchableOpacity
        style={{
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          width: 50,
          height: 50,
        }}
        onPress={() => navigation.navigate('Second', {name: 'Second'})}>
        <Text>Click!!</Text>
      </TouchableOpacity>
    </View>
  );
};
const Second = () => {
  return <Text>This is Second Screen!!</Text>;
};

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="First"
          component={First}
          options={{title: 'First Screen'}}
        />
        <Stack.Screen name="Second" component={Second} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

 

다음은 출력 화면이다.