So schließen Sie das Modal in der Reaktion native

Question

Ich bin Neuling zu reagieren native Entwicklung. Ich möchte die modale Komponente beim Drücken außerhalb des modalen Reaktivats schließen. Unten ist mein Code.

state = { 
    visibleModal : false, 
}; 

_hideModal(){ 
    this.setState({ 
    visibleModal: true, 
    }) 
} 


render(){ 
    return(
     <View style={ 
      [styles.container, 
       {backgroundColor: this.state.visibleModal ? 'rgba(47, 60, 73, 0.75)': 'white'} 
      ]}> 

      <Text>Text Behind Modal</Text> 

      { this._renderButton('BUTTON',() => this.setState({ visibleModal: true})) } 
      <TouchableWithoutFeedback onPress={() => {this._hideModal()}}> 
      <Modal animationType={"slide"} 
        transparent={true} 
        visible={this.state.visibleModal}> 

         <View style={styles.modalContent}> 
          <Row /> 
         </View> 

      </Modal> 
      </TouchableWithoutFeedback> 
     </View> 
    ); 
} 

}

Answer 1

einfach diese Stütze in Modal hinzufügen

onRequestClose={() => { this.visibleModal(false); } } 

Es wird Ihre modal schließen beim Drücken zurück Taste

<Modal animationType={"slide"} 
    transparent={true} 
    visible={this.state.visibleModal} 
    onRequestClose={() => { this.visibleModal(false); } } 
> 

EDIT

Oben wird nur auf Android wie der document.

Für beide

Sie benutzerdefinierte Schaltfläche hinzufügen können modal

<TouchableOpacity 
    onPress={() => { 
     this.setState({visibleModal: false}) 
    } }> 
    <Image 
     style={[styles.modalBackIcon]} 
     source={require('../../theme/images/back-icon.png')} /> 
</TouchableOpacity>