Front-end/React Native
[React Native] React Navigation 스택 초기화하기
아잉으니야
2021. 1. 16. 15:49
[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
을 사용한 마지막 페이지에서는 뒤로가기가 안되는 것을 확인할 수 있다.