[ 인생퍼즐 ] RN Navigation 화면 남는 문제

이슈

주인공 정보 수정 후 주인공 리스트를 리로딩하기 위해 Event Parameter를 넘기는 방법으로 만들어졌다. 이때 Navigation의 Navigate로 Event Parameter와 함께 페이지 이동을 했을 때 기존 화면이 남아 있는 문제가 발생했다. 

GoBack 사용

기존 화면을 없애기 위해 뒤 페이지로 이동하면서 현재 페이지를 삭제하는 GoBack 메서드 사용하기로 했다. 하지만 GoBack 메서드는 Parameter를 넘길 수 없기 때문에 이를 해결할 수 있는 방법이 필요했다.

Function을 Parameter로 넘기기

주인공 리스트 화면에 UseState 생성 후 State를 변경할 수 있는 Function 선언했다. 선언한 Function은 필요한 페이지로 Parameter로 넘겨 GoBack함수와 함께 사용하도록 했다. 이 때 State 변경으로 인해 주인공 리스트가 리로딩된다.

이슈 수정 코드 예시

1. 현재 화면

 

const currentPage = ({navigation, route}: Props): JSX.Element => {
  const [event, setEvent] = useState<String>('');

  useEffect(() => {
    reloading();
  }, [event]);

  const settingEvent = (event: Boolean) => {
    setEvent(event);
  };

  Navigation.navigate( 'NextPage', { Params: { settingEvent } } );
};

 

2. 다음 화면

 

const NextPage = ({navigation, route}: Props): JSX.Element => {
  const goBack = () => {
    route.params.settingEvent('modify');
    navigation.goBack();
  }
  
  if(isSuccess) goBack();
}