Question

我试图在按下硬件后退键时隐藏子组件。

这是我到目前为止所做的：

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);
    }

当我单击“后退按钮”时，它会返回到上一个按钮，但过一秒钟它还会关闭该应用程序（第一个屏幕）。

当我从FilterByType.js中删除BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick);时，“后退按钮”将在整个应用程序中停止工作。

任何建议我做错了吗？？！

Answer 1

来自React-native BackHandler Documentation：

Android：检测没有按下硬件后退按钮，并以编程方式调用默认的后退按钮功能以在没有侦听器时退出应用程序，或者如果没有侦听器返回true 。

因此，我为此编辑了 handleBackButtonClick（）：

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

在按下Back按钮时在React Native上隐藏组件

1 个答案: