如何为React Native组件设置最小宽度或高度?
在css中,我可以使用min-width / min-height
https://facebook.github.io/react-native/docs/flexbox.html#content
react-native docs上没有minWidth / minHeight
答案 0 :(得分:68)
minHeight , maxHeight , minWidth 和 maxWidth 属性iOS和Android的费用为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>
)
}
});
然后,正如您在此处所见,无论标签内容宽度如何,按钮宽度都是相同的。
答案 3 :(得分:0)
我使用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:在我的搜索过程中,我发现react-native非正式地支持minHeight
和maxHeight
,但仅适用于iOS而不适用于Android。我不敢用它们。上面的代码效果很好,让我可以控制。
答案 4 :(得分:0)
您可以使用minHeight或flexBasis - 它类似。