反应原生：无法将自定义高度设置为模态

Posted 2023-02-16

【中文标题】反应原生：无法将自定义高度设置为模态

【英文标题】：react native:Unable to set custom height to modal

【发布时间】：2020-06-19 21:32:24

【问题描述】：

我是 react-native 的新手，我正在尝试使用以下代码为模式提供自定义高度并在屏幕中居中。

  <Modal visible=this.state.isModalVisible animationType = "slide" transparent = false 
     onRequestClose=this.closeModal style= height:300 >
            <View style=
               flex: 1,
               flexDirection: 'column',
               justifyContent: 'center',
               alignItems: 'center',
               backgroundColor:'blue'
              >
            <View>
             <Text style= fontWeight:'bold', fontSize: 20, color: '#f79334', marginTop: 15 
         > Services </Text>
            </View>
            </View>
  </Modal>

【问题讨论】：

您可以将自定义高度作为height: 'height' 指定给您的父视图组件。

@sdushan 我已经尝试过了，但对我不起作用

【参考方案1】：

改为将您的高度设置为内容View

   <Modal style=  margin: 0, alignItems: 'center', justifyContent: 'center' >
      <View
        style=
          height: 400,
          width: '100%',
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: 'blue',
        
      >
        <View>
          <Text
            style=
              fontWeight: 'bold',
              fontSize: 20,
              color: '#f79334',
              marginTop: 15,
            
          >
            Services
          </Text>
        </View>
      </View>
</Modal>

【讨论】：

@Mahi 结果如何？ .. .因为它按我的预期工作

对我来说，它需要 100% 的高度和宽度，我想提供自定义高度并应将其显示在中心。

感谢@hend-el-sahli，它按预期工作，你搞定了，谢谢。