React Native

react native 뒤로가기 이벤트 ( 두번 )

Machine_웅 2020. 7. 13. 13:31
728x90
반응형
componentDidMount(){
        this.subscribe = this.props.navigation.addListener('focus', e => {
            // Prevent default action
           console.log("hi")
           this.exitApp = false
           BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
        });

        this.subscribe2 = this.props.navigation.addListener('blur',e => {
            console.log('bye')
            this.exitApp = false
            BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
        })
    }

    componentWillUnmount(){
        this.subscribe()
        this.subscribe2()
        BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
    }

    // 이벤트 동작
    handleBackButton = () => {
        // 2000(2초) 안에 back 버튼을 한번 더 클릭 할 경우 앱 종료
        if (this.exitApp == undefined || !this.exitApp) {
            this.exitApp = true;
            this.timeout = setTimeout(
                () => {
                    this.exitApp = false
                },
                2000    // 2초
            );
        } else {
            clearTimeout(this.timeout);
            BackHandler.exitApp();  // 앱 종료
        }
        return true;
    }



 

// function 

  useFocusEffect(
    useCallback(() => {

      const backListener = () => {
        if (exitApp == undefined || !exitApp) {
          exitApp = true
          ToastAndroid.show("한번 더 뒤로가기 입력시 종료됩니다.",ToastAndroid.SHORT)
          timeOut = setTimeout(() => {
            exitApp = false
          }, 2000)
        } else {
          clearTimeout(timeOut)
          BackHandler.exitApp()// 앱종료 
        }
        return true // false 리턴시 기존동작대로 움직임, 
      }


      const backHandler = BackHandler.addEventListener("hardwareBackPress", backListener)

      return () => {
        backHandler.remove()
      }
    })
  )
728x90
반응형