[React Native] 뒤로가기, 화면 벗어나기 막는 방법

 

navigtaion.addListener('beforeRemove') 를 이용하면 됩니다!

 

 useEffect(() => {
    const gestureHandler = navigation.addListener('beforeRemove', e => {
      if (!isLoading) {
        return;
      }

      e.preventDefault();

      Alert.alert('구매가 진행되고 있어요', '화면을 벗어나면 구매가 취소돼요.', [
        {
          text: '머무르기',
          onPress: () => {},
        },
        {
          text: '나가기',
          onPress: () => {
            navigation.dispatch(e.data.action);
          },
        },
      ]);
    });

    return gestureHandler;
  }, [navigation, isLoading]);

 

구매 화면에서 구매 진행 중일 때 화면을 벗어나려고 할 경우 팝업 메시지로 방지하는 코드를 만들었어요.

 

isLoading 이란 변수는 구매 진행 중이면 true가 되고, 아닐 경우 false가 됩니다.

 

isLoading가 들어가는 자리에 자신의 상황에 맞는 변수를 넣어서 활용하시면 됩니다!