React Native 中的最小宽度/高度 [英] Minimum width/height in React Native

问题描述

如何为 React Native 组件设置最小宽度或高度?

How can I set minimum width or height for React Native component?

在 css 中，我可以使用 min-width/min-height

In css, I can use min-width/min-height

https://facebook.github.io/react-native/docs/flexbox.html#content

react-native 文档上没有 minWidth/minHeight

There is no minWidth/minHeight on react-native docs

推荐答案

minHeight、ma​​xHeight、minWidth 和 ma​​xWidth 属性从 react-native 版本 0.29.0 起支持 iOS 和 Android.

minHeight, maxHeight, minWidth and maxWidth properties are supported as of react-native version 0.29.0 for iOS and Android.

这是 ma​​xHeight 描述>反应原生文档.此说明也适用于其他最小/最大样式属性.

Here is the maxHeight description from react-native documentation. This description also applies for other min/max style properties.

maxHeight 是这个组件的最大高度，在逻辑像素.

maxHeight is the maximum height for this component, in logical pixels.

它的工作原理类似于 CSS 中的 max-height，但在 React Native 中你必须使用点数或百分比.不支持 em 和其他单位.

It works similarly to max-height in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.

参见 https://developer.mozilla.org/en-US/docs/Web/CSS/max-height 用于更多详情.

See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height for more details.

一个虚拟的例子:

<View
  style={{
    minWidth: '20%',
    maxWidth: 500,
    minHeight: '10%',
    maxHeight: 150,
  }}
/>

这篇关于React Native 中的最小宽度/高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！