인프런 커뮤니티 질문&답변

문제가 어디인지를 찾는 능력을 길러야합니다. 현재 문제를 기준으로 설명하면,

이미지 선택 화면(SelectPhotosScreen) -> 이미지 픽커(ImagePickerScreen) -> 이미지 선택 화면(SelectPhotosScreen)

에서 뒤로가기를 하면 이미지 픽커(ImagePickerScreen) 화면으로 돌아갑니다.

이미지 선택 화면(SelectPhotosScreen) -> 이미지 픽커(ImagePickerScreen) -> 이미지 선택 화면(SelectPhotosScreen) -> 글 작성 화면(WriteTextScreen)

에서도 뒤로가기를 하면 이미지 픽커(ImagePickerScreen) 화면으로 돌아갑니다.

즉, 스택에 이미지 픽커(ImagePickerScreen) 화면이 남아 있다는 것을 알 수 있습니다.

이미지 픽커(ImagePickerScreen) 화면에서 선택된 이미지들을 가지고, 이미지 선택 화면(SelectPhotosScreen)으로 돌아올 때 스택에서 사라져야 할 이미지 픽커(ImagePickerScreen) 화면이 남아있다는 것이 됩니다.

따라서, ImagePickerScreen.js 파일에서 확인 버튼을 눌렀을 때, SelectPhotosScreen.js 파일로 이동하는 부분을 확인하면 됩니다.

스택에 화면이 남아있어서 나타나는 현상으로, 앞에서 질문한 내용과 같은 문제입니다.

https://inf.run/BGHtc

https://github.com/dvrakry/rn-photo2/blob/master/src/screens/ImagePickerScreen.js#L21

navigate함수를 popTo로 변경하세요

https://reactnavigation.org/docs/native-stack-navigator/#popto

안녕하세요, 인프런 AI 인턴입니다. dvdve님.

navigation.replace() 가 예상대로 작동하지 않는 문제를 겪고 계신 것 같습니다. 이 함수는 현재 스크린을 제공된 스크린으로 교체하는 역할을 합니다. 따라서 뒤로 가기 버튼을 누르더라도 이전 스크린으로 돌아가지 말아야 합니다. 이와 같은 문제가 발생하는 경우 몇 가지 확인해 보아야 할 사항이 있습니다.

1. navigation 객체의 유효성

다음의 예시처럼 navigation 객체가 적절하게 정의되어 있는지 확인해 보세요.

const navigation = useNavigation();

2. 네비게이션 스택 구조

현재 사용 중인 네비게이션 스택이 제대로 설정되어 있는지 확인하세요. replace 메서드는 같은 네비게이션 스택에만 영향을 미치므로, 스택이 제대로 설정되어 있지 않으면 예상치 않은 동작을 할 수 있습니다.

3. MainRoutes.WRITE_TEXT의 정의

MainRoutes.WRITE_TEXT가 제대로 정의되어 있고, 올바른 경로가 설정되어 있는지 확인해 보세요. URL이 잘못되어 있을 경우, replace가 작동하지 않을 수 있습니다.

유사한 질문 사례

• React Navigation에서 replace 사용 문제 해결 방법: 유사한 문제에 대한 해결책을 다루고 있는 사례입니다. 네비게이션 메서드의 올바른 사용 방법에 대해 설명하고 있습니다.
  

위의 방법들을 통해 문제를 해결하실 수 있을 것입니다. 추가적으로, 스크린들이 같은 네비게이션 컨텍스트 내에서 실행되고 있는지 점검해보세요.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.