Schließen reagieren natives Modal durch Klicken auf Overlay?

Question

Ist es möglich, react native modal zu schließen, indem Sie auf Overlay klicken, wenn transparent die Option true ist? Die Dokumentation liefert nichts dazu. Ist es möglich?

Answer 1

Wenn ich richtig verstanden habe, möchten Sie das Modal schließen, wenn der Benutzer außerhalb davon klickt, richtig?

Wenn ja, ich für diese gesucht vor einiger Zeit und die einzige Lösung, die ich erinnere mich war dies ein (das ist derjenige, der Ich habe bisher mit):

render() { 
    if (!this.state.modalVisible) 
    return null 
    return (
    <View> 
     <Modal 
      animationType="fade" 
      transparent={true} 
      visible={this.state.modalVisible} 
      onRequestClose={() => {this.setModalVisible(false)}} 
     > 
      <TouchableOpacity 
      style={styles.container} 
      activeOpacity={1} 
      onPressOut={() => {this.setModalVisible(false)}} 
      > 
      <ScrollView 
       directionalLockEnabled={true} 
       contentContainerStyle={styles.scrollModal} 
      > 
       <TouchableWithoutFeedback> 
       <View style={styles.modalContainer}> 
        // Here you put the content of your modal. 
       </View> 
       </TouchableWithoutFeedback> 
      </ScrollView> 
      </TouchableOpacity> 
     </Modal> 
    </View> 
) 
} 

// Then on setModalVisible(), you do everything that you need to do when closing or opening the modal. 
setModalVisible(visible) { 
    this.setState({ 
     modalVisible: visible, 
    }) 
} 

Erklärung

Dies ist im Grunde eine TouchableOpacity auf dem gesamten Bildschirm zu erhalten, wenn der Benutzer das Modal schließen schließt. Das TouchableWithoutFeedback soll verhindern, dass die TouchableOpacity innerhalb des Modal funktioniert.

Wenn Sie eine bessere Lösung haben, bitte hier teilen.

Answer 2

Wir können sie ausarbeiten durch Zugabe:

<touchableObacity onPress={()=>this.setState({modalVisibilty:false})}> 
<View style={{opacity:0, flex:1 }}/> 
</touchableOpacity> 

unter dem Fenster und eine weitere oben und das Layout-Stil Ihr Bildschirm anzupassen ändern.

Erläuterung:

Sie 2 große versteckte Tasten machen den Benutzer Kontakt zu fangen und den Modal Sichtbarkeitsstatus auf false ändern.