Comment fermer la modale de réagir natif

Je suis novice à réagir natif de développement. Je veux fermer la modale de composants lors de la pression à l'extérieur de l'modal dans reactnative. Ci-dessous mon 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>
    );
}

}

InformationsquelleAutor HSBP | 2017-07-21
  1. 9

    Juste ajouter cet accessoire en Modal

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

    Il va fermer votre modal en appuyant sur la touche retour

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

    MODIFIER

    Code ci-dessus ne fonctionne que sur Android comme par le document.

    Pour les deux,

    Vous pouvez ajouter des bouton pour fermer la modale

    <TouchableOpacity
    onPress={() => {
        this.setState({visibleModal: false})
    } }>
    <Image
        style={[styles.modalBackIcon]}
        source={require('../../theme/images/back-icon.png')} />
</TouchableOpacity>
    • Pas que l'accessoire ne fonctionne pas sur ios @JigarShah
    • Vous n'avez pas spécifié qu' 😉
    • Mon erreur.. désolé@JigarShah
    • Dois-je joindre le touchableopacity à l'intérieur ou à l'extérieur du modal
    • oui, à l'intérieur de modal.
    • Laissez-nous continuer cette discussion dans le chat.
    • l'OP a demandé comment faire pour fermer la modale en cliquant sur l'arrière-plan. Vous n'avez pas répondu à sa question.

    InformationsquelleAutor Jigar Shah
  2. 0

    Question :

    Pour fermer la modale lorsque vous cliquez à l'extérieur de l'modal.

    Solution:

    Juste supprimer la fonction appel sur TouchableWithoutFeedback,il va fonctionner..

        <TouchableWithoutFeedback onPress={() => {}}>
  <Modal animationType={"slide"}
               transparent={true}
               visible={this.state.visibleModal}>

                  <View style={styles.modalContent}>
                      <Row />
                  </View>
        </Modal>
</TouchableWithoutFeedback>
    InformationsquelleAutor Akshay Yeole