Définissez la largeur et la hauteur sur le mode React natif

Question

Je ne peux pas configurer la hauteur et la largeur modales à l'aide de la propriété "style". Existe-t-il un autre moyen de définir la hauteur et la largeur modales?

 <Modal style={{height: 300, width: 300}}
                   visible={this.state.isVisible}
                   onRequestClose={this.closeModal} >

Le code ci-dessus ne fonctionne pas.

Answer 1

Selon la documentation Modal , il n'y a pas de prop style à définir.

Vous pouvez essayer de définir les dimensions <View> à l'intérieur du <Modal> à la place:

<Modal transparent={true}
       visible={this.state.isVisible}
       onRequestClose={this.closeModal}>
  <View style={{
          flex: 1,
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center'}}>
    <View style={{
            width: 300,
            height: 300}}>
      ...
    </View>
  </View>
</Modal>

Answer 2

Dans la documentation Modal , il n'est pas mentionné mais il a une propriété de style.

Ce qui suit fonctionne pour moi.

<Modal
    style={styles.modalContent}
    isVisible={this.state.isVisible}
    onBackdropPress={this.closeModal}
>
    <Component {...componentProps} />
</Modal>

const styles = StyleSheet.create({
    modalContent: {
        justifyContent: 'center',
        alignItems: 'center',
        margin: 0
    },
});