BackAndroid가 마운트 해제되지 않음 - React Native (Android)

Question

나는 Android에서 React Native 0.29로 작업 중입니다. 내 앱의 특정보기/활동/화면에서 BackAndroid 버튼에 대한 이벤트 리스너를 추가하고 싶습니다.이 버튼은 반응 네이티브와 함께 사용할 수 있습니다. 메인 화면이 아닌 경우 스택에서 뷰를 튕겨내는 내 앱 (내 index.android.js 파일)에 이미 전역 BackAndroid 이벤트 리스너가 추가되었습니다.

이벤트 리스너는 componentDidMount() 라이프 사이클 메소드로 활성화되며 작동합니다. 그것은 글로벌 것을 오버라이드하고 예상대로 작동합니다. 이제 문제는 componentWillUnmount() 라이프 사이클 메소드가 실행될 때 제거되지 않는다는 것입니다. 따라서 특정 화면에서 돌아 왔을 때 이벤트 수신기가 여전히 남아있어 문제를 일으킬 수 있습니다. 여기 내가 한 일이 있습니다 :

componentDidMount() { 
    BackAndroid.addEventListener('backBtnPressed', this._handleBackBtnPress.bind(this)) 
} 

componentWillUnmount() { 
    BackAndroid.removeEventListener('backBtnPressed', this._handleBackBtnPress.bind(this)) 
} 

나는 그것이 작동하지 않는 이유를 모르겠다. 왜 작동하지 않는지 이해하고이 문제를 해결하기 위해 무엇을해야하는지 이해해주십시오.

Answer 1

이 문제를 해결하는 데 몇 시간을 소비합니다. 나는 이것을 공유하면 다른 개발자들에게 도움이 될 것이라고 생각한다.

.bind(this) 문과 관련된 주요 문제는 항상 bind이 새로운 기능을 반환합니다. 따라서이 코드에서 this._handleBackBtnPress.bind(this)은 addEventListener과 removeEventListener에서 같은 기능이 아닙니다. 그것들은 서로 다른 일류 객체를 나타내는 서로 다른 함수입니다. 그래서 removeEventListener이 청취자를 제거하지 못합니다.

이 문제를 해결하기 위해, 우리는 우리의 생성자 메서드에 다음 문을 추가 할 수 있습니다 - this._handleBackBtnPress = this._handleBackBtnPress.bind(this) 및 addEventListener 및 removeEventListener 모두에서 .bind(this)를 제거합니다. 둘 다 동일한 기능을 참조하고 예상대로 작동 이제

constructor(props) { 
    super(props) 
    this._handleBackBtnPress = this._handleBackBtnPress.bind(this) 
} 

componentDidMount() { 
    BackAndroid.addEventListener('backBtnPressed', this._handleBackBtnPress) 
} 

componentWillUnmount() { 
    BackAndroid.removeEventListener('backBtnPressed', this._handleBackBtnPress) 
} 

: 그래서 우리의 코드는 다음과 같을 것입니다.