将宽度和高度设置为React-native模式

Question

我无法使用"style"属性配置模态高度和宽度.有没有其他方法来设置模态高度和宽度？

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

上面的代码不起作用.

Answer 1

根据Modal文档,没有style要设置的道具.

您可以尝试在<View>内部设置尺寸<Modal>:

<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

尝试添加组件margin:0的样式<Modal>

Answer 3

在Modal文档中没有提到它，但它有一个 style 属性。

以下内容对我有用。

<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
    },
});