제스처로 특정 화면으로 돌아가기 | 반응 탐색

최근에 1번 화면 > 2번 화면 > 3번 화면 > 4번 화면으로 이동 후 바로 1번 화면으로 돌아가야 하는 경우가 있었습니다.

다음은 데모 프로젝트가 포함된 expo snack입니다.

react-navigation docs에 따라 간단히 navigation.navigate('Screen1') 기능을 사용하여 화면 1로 돌아갈 수 있습니다.



좋아 보인다. 하지만 스와이프 동작이나 뒤로 버튼으로 돌아가려고 하면 어떻게 될까요?



왼쪽에서 오른쪽으로 스와이프하거나 헤더 뒤로 버튼을 사용하여 화면 3으로 돌아갑니다. 이 문제를 해결하기 위해 reset 작업을 사용하여 탐색 상태를 다시 작성하고 여기에서 화면 2와 화면 3을 제거할 수 있습니다. 화면 4에 다음 코드를 간단히 추가해 보겠습니다.

  useEffect(() => {
    const { routes } = navigation.getState();

    const filteredRoutes = routes.filter(
      route => route.name !== 'Screen3' && route.name !== 'Screen2',
    );

    navigation.reset({
      index: filteredRoutes.length - 1,
      routes: filteredRoutes,
    });
  }, [])

{ routes } = navigation.getState() 내비게이션 경로 상태를 가져옵니다.

filteredRoutes = routes.filter 스택에 더 이상 포함하고 싶지 않은 화면을 제거합니다.

index: routes.length - 1 경로 배열의 최신 인덱스로 인덱스 재설정

routes: filteredRoutes 경로를 필터링된 경로로 재설정

그게 다야! 게시물이 마음에 드시면 반응과 댓글로 지원해 주세요.