프론트/React Native, React

[리액트네이티브] react-native stack navigation 넘어가면 초기화하기

연지양갱 2023. 6. 26. 22:20
728x90
반응형
SMALL

이번 졸업 프로젝트로 하는 내용에서

QR코드를 스캔하고 해당 기능페이지로 넘어간다

하지만 다시 뒤로 가기를 하면 그 전에 스캔 했던

QR코드와 station의 정보가 나와서 이런 점을 보완하고자

react native navigation을 공부하기로 했다..

그래서 찾은 내용은

Reset!!!

이라는 내용이다..!

https://zeunny.tistory.com/18

 

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

[React Native] React Navigation 스택 초기화하기 React Native 프로젝트에서 React Navigation 중 Stack Navigation 을 사용하면 스택이 계속 쌓인다. 이 때 스택을 초기화 해야하는 경우가 있다. 대표적으로 step을 밟

zeunny.tistory.com

이 페이지를 참고하면 찾아볼 수 있을 것이다

 

 

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',
  },
});

 

onPress={() => navigation.reset({routes: [{name: 'last'}]})}

버튼을 클릭하면

navigation을 하면서 route값을 보낸다

하지만 reset을 함!!

navigation으로 route, 데이터를 보내면서

stack에 쌓였던 내용은 reset하겠다는 의미이다ㅏ

이부분에서 모든 stack이 해제 된다는 것인지는 잘 모르겠다!

아무튼 이부분도 내가 사용해보고

다시 로직을 짜야겠다!

 

반응형