react-native - 如何通过在 React Native 中点击模态主体来隐藏模态

Question

我已经编写了一个代码来在用户单击模态中的“隐藏我”文本时隐藏模态，但我也希望当我们在模态外单击时隐藏模态。我可以使用“TouchableWithoutFeedback”，但它对我不起作用。我如何为此使用“TouchableWithoutFeedback”或任何其他解决方案？

this.state = {
 showPopupModal: false
}
  hideModal(){
   this.setState({showPopupModal: false});
  }  
showModal(){
  this.setState({showPopupModal: true});
 }  

return(
 <Conatiner>
  <View>
   <TouchableOpacity onPress={() => { showModal(); }}>
     <Text> open modal <Text>
   </TouchableOpacity>
</View>

<Modal visible={this.state.showPopupModal}>
  <View>
    <TouchableOpacity onPress={() => { hideModal(); }}>
      <Text> hide me </Text>
     </TouchableOpacity>
   </View>
 </Modal>
</Container>
);

Answer 1

您必须设置 Modal 的 isVisible 和 onBackdropPress 属性，例如:

  <Modal isVisible={this.state.showPopupModal} onBackdropPress={() => this.hideModal()} >
    ..
 </Modal>