React Native中的最小宽度/高度

时间:2015-10-30 02:55:08

标签: react-native

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

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

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

react-native docs上没有minWidth / minHeight

5 个答案:

答案 0 :(得分:68)

react-native版本支持

minHeight maxHeight minWidth maxWidth 属性iOSAndroid的费用为0.29.0

以下是来自react-native documentation maxHeight 说明。此描述也适用于其他最小/最大样式属性。

  

maxHeight是此组件的最大高度,in   逻辑像素。

     

它与CSS中的max-height类似,但在React Native中你必须这样做   使用积分或百分比。不支持Ems和其他单位。

     

请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/max-height   更多细节。

一个虚拟的例子:

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

答案 1 :(得分:0)

你可以这样做:

_getButtonStyle() {
  var style = {height:36,padding:8}

  if(this.props.buttonText.length < 4){
    style.width = 64
  }
  return style
}

答案 2 :(得分:0)

我能够为您解决问题。这是一个有效的演示...... https://rnplay.org/apps/vaD1iA

以下是关键部分。

首先,您拉入设备尺寸......

var Dimensions = require('Dimensions');
var {
  width,
  height
} = Dimensions.get('window');

这是按钮组件,它使用设备宽度作为按钮的基础

const Button = React.createClass({
  render(){
    return(
      <TouchableHighlight>
        <Text style={[styles.button,{width: width - 20}]}>
          {this.props.children}
        </Text>
      </TouchableHighlight>
    )
  }
});

然后,正如您在此处所见,无论标签内容宽度如何,按钮宽度都是相同的。

enter image description here

答案 3 :(得分:0)

我使用onLayout道具解决了这个问题,非常简单:

示例:

第1步:我在状态中创建一个道具,它将保持图像的当前高度 curImgHeight

constructor(){
  super(props);
  this.state={curImgHeight:0}
}

第2步:在支持View道具的任何ElementonLayout中使用道具。

我在这里使用Image。然后,我们所要做的就是,只要实际图像高度超过我们的最小高度,就改变该状态属性。

render(){
  <Image
    source={{uri: "https://placehold.it/350x150"}}
    resizeMode='cover'

    style={[styles.image, {height:(this.state.curImgHeight<=0?null:this.state.curImgHeight)}]}

    onLayout={(e)=>{
      let {height} = e.nativeEvent.layout;
      let minimumImgHeight = 400; //We set the minimum height we want here.
      if(height<= minimumImgHeight){ //Whenever the real height of the image is less than the minimum height
        this.setState({curImgHeight:minimumImgHeight}); //just change the curImgHeight state property to the minimum height.
      }
    }}
  />
}

这就是我为我解决的问题。

p.s:在我的搜索过程中,我发现react-native非正式地支持minHeightmaxHeight,但仅适用于iOS而不适用于Android。我不敢用它们。上面的代码效果很好,让我可以控制。

答案 4 :(得分:0)

您可以使用minHeight或flexBasis - 它类似。