最小宽度/高度阵营天然

Question

如何设置最小宽度或高度为阵营机组件？

在CSS中，我可以使用最小宽度/最小高度

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

没有minWidth /了minHeight的反应本地文档

Answer 1

minHeight，maxHeight，minWidth和maxWidth属性支持作为反应的天然版本0.29.0为iOS和Android。

Answer 2

你可以做这样的事情：

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

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

Answer 3

我能够制定出解决方案为您服务。这里有一个工作演示... 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> 
    ) 
    } 
}); 

为按钮的基础上。然后，当你可以看到这里，无论标签内容宽度如何，按钮宽度都是相同的。

Answer 4

我解决了这个利用onLayout道具，它很容易：

例子：

第1步：创建在我们国家的道具将被保存当前高度的图像称为curImgHeight。

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

步骤2：使用在支柱任何View或Element支持onLayout道具。

在这里，我用它与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：在我的搜索过程中，我发现反应原生非正式地支持minHeight和maxHeight，但仅适用于iOS，不适用于Android。我不敢用它们。上面的代码运行良好，并给我控制。

Answer 5

您可以使用或了minHeight flexBasis - 它是相似的。