React-Native Navigation ( 화면 전환 ) 시작하기

Navigation

React-Native에서 stack navigator는 앱이 화면간에 전환 및 탐색 기록을 관리 할 수 있는 방법을 제공한다.

 

앱에서 stack navigator를 하나만 사용하는 경우 웹 브라우저가 탐색 상태를 처리하는 방식과 개념적으로 유사하다.

 

사용자가 앱과 상호 작용할 때 앱이 탐색 stack에서 항목을 push 및 pop하여 사용자에게 다른 화면이 표시된다.

 

React-Native stack navigator와 웹 브라우저의 차이점은 React Navigation의 stack navigator는 스택의 경로 사이를 탐색 할 때 Android, IOS에서 예상되는 제스처 및 애니메이션을 제공한다.

 

환경 설정

1. 우선 expo-cli를 설치한다.

npm i -g expo-cli

 

2. expo에서 react-navigation, react-native-gesture-handler, react-native-reanimated, react-native-screens, react-navigation-stack 를 설치한다.

expo install
	 react-navigation
	 react-native-gesture-handler 
	 react-native-reanimated 
 	 react-native-screens
     react-navigation-stack

 

3. App,js 작성

import React from 'react';
import { View, Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Seonoh Home Screen</Text>
      </View>
    );
  }
}

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen,
  },
});

export default createAppContainer(AppNavigator);

 

위 코드를 실행한 결과는 다음과 같다.

하지만 텍스트만 띄우는걸 하려고한게 아니다!!!

 

우리의 목적은 화면전환!

 

App.js를 수정해야한다.

 

App.js에서 Button을 추가하고 onPress function을 정의한다.

 

그리고 navigator에 DetailsScreen 추가하고 초기 화면을 Home으로 지정해주는 작업을 하면된다.

import React from 'react';
import { View, Text, Button } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Seonoh Home Screen</Text>
        <Button
          title = 'Go detail screen'
          onPress = {()=>this.props.navigation.navigate('Details')}/>
      </View>
    );
  }
}

class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Seonoh Detail Screen</Text>
        <Button
          title = 'Go Home screen'
          onPress = {()=>this.props.navigation.navigate('Home')}/>
      </View>
    );
  }
}

const AppNavigator = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen
  },
  {
    initialRouteName: 'Home',
  }
);

export default createAppContainer(AppNavigator);

위 코드에서 중요한 부분은 this.props.navigation.navigate('Home') 코드이다.

 

위 코드에서는 navigate함수를 이용했는데, 외에도 push함수가 있다. 네이밍에서 느껴지듯이 navigate함수는 찾아가는 느낌이고, push는 추가해주는 느낌이다. 어떻게 다를지 감이 온다.

 

navigate함수를 사용해서 Home화면에서 ~navigate('Home')하면 어떻게 될까? ( 화면이 그대로 유지된다. )

 

하지만 push를 한다면? ( 'Home' ) 화면이 하나 더 뜬다. 그리고 goBack()함수를 이용한다면 stack에서 하나씩 pop되면서 제거된다.

실행결과