[React Native] React Navigation 스택 초기화하기

[React Native] React Navigation 스택 초기화하기

 

React Native 프로젝트에서 React Navigation 중 Stack Navigation 을 사용하면 스택이 계속 쌓인다. 이 때 스택을 초기화 해야하는 경우가 있다. 대표적으로 step을 밟으면서 회원가입을 할 경우! 회원가입이 끝나고 난 뒤에도 뒤로가기를 했을때 회원가입 중인 페이지를 안 보이게 하려면 스택을 초기화해야한다.

 

초기화 해주는 방법은 쉽다. navigate 대신 reset 을 사용하면 된다.

navigation.reset({routes: [{name: "welcome", params: { email, password }}]})

name 옆에는 지정해준 컴포넌트 이름, params 에는 다음 페이지로 보내줄 변수들을 입력!

 

코드 예시

import React from 'react';
import {StyleSheet, View, Text, Button} from 'react-native';

export default ({navigation}) => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>세번째 페이지입니다.</Text>
      <Button
        onPress={() => navigation.reset({routes: [{name: 'last'}]})}
        title="다음 페이지로"
        color="#999"
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 20,
    fontWeight: 'bold',
  },
});

 

 

첫번째~세번째 페이지에서는 스와이프로 뒤로가기가 가능한데,reset 을 사용한 마지막 페이지에서는 뒤로가기가 안되는 것을 확인할 수 있다.