Блог

Я пытаюсь скрыть дочерний компонент при нажатии аппаратной клавиши возврата.

Это то, что я делал до сих пор:

 render(){

     return(
            <View > 
               <TouchableOpacity onPress={()=> this.onTypePress('cuisine')}> 
                 <Text>Cuisines</Text> 
               </TouchableOpacity>
               {this.renderFilterType()}    
            </View>
           );
     }

     renderFilterType(){
        if(this.props.showFilterByType){
          return <FilterByType />
        }
     }
  

this.props.showFilterByType — это логическое значение, которое я устанавливаю с помощью Redux.

onTypePress запустит состояние в состоянии Redux.

Я передаю нажатие кнопки «Назад» следующим FilterByType образом :

 constructor(props){
    super(props)
     this.handleBackButtonClick= this.handleBackButtonClick.bind(this)
}
handleBackButtonClick(){
       this.props.hideFilterByType(' ')
        BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick);
      }
componentDidMount(){
      BackHandler.addEventListener('hardwareBackPress', 
      this.handleBackButtonClick);
    }
  

Когда я нажимаю кнопку «Назад», он возвращается к предыдущей кнопке, но через секунду он также закрывает приложение (первый экран).

И когда я удаляю BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick); из FilterByType.js , Кнопка «Назад» перестает работать во всем приложении.

Любое предложение, где я делаю неправильно, пожалуйста ??!!

Из документации React-native BackHandler :

Android: обнаружение аппаратных нажатий кнопки «Назад» и программный вызов функции кнопки «Назад» по умолчанию для выхода из приложения, если нет слушателей или если ни один из слушателей не возвращает true.

Поэтому я отредактировал handleBackButtonClick() для этого :

  handleBackButtonClick(){
   this.props.hideFilterByType(' ')
   BackHandler.removeEventListener('hardwareBackPress',this.handleBackButtonClick);
   return true
 }