Chiều rộng/chiều cao tối thiểu trong React Native

Question

Làm cách nào để đặt chiều rộng hoặc chiều cao tối thiểu cho thành phần Gốc phản ứng?

Trong css, tôi có thể sử dụng min-width/min-height

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

Không có MinWidth/minheight trên tài liệu phản ứng bản địa

Answer 1

minHeight, maxHeight, minWidth và maxWidth tính cũng được hỗ trợ các phản ứng bản địa phiên bản 0.29.0 cho iOS và Android.

Answer 2

Bạn có thể làm một cái gì đó như thế:

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

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

Answer 3

Tôi đã có thể tìm ra giải pháp cho bạn. Đây là bản trình diễn làm việc ... https://rnplay.org/apps/vaD1iA

Và đây là các phần chính.

Trước tiên, bạn kéo trong các kích thước thiết bị ...

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

Dưới đây là các thành phần nút, trong đó sử dụng độ rộng thiết bị làm cơ sở cho các nút với

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

Sau đó, khi bạn có thể thấy ở đây, chiều rộng nút sẽ giống nhau bất kể chiều rộng nội dung nhãn.

Answer 4

tôi giải quyết điều này bằng cách sử dụng onLayout prop, nó rất dễ dàng:

Ví dụ:

Bước 1: Tôi tạo ra một chỗ dựa trong tiểu bang của chúng tôi sẽ tổ chức chiều cao hiện tại của hình ảnh được gọi làcurImgHeight.

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

Bước 2: Sử dụng prop trong bất kỳ View hoặc Element có hỗ trợ onLayout prop.

Ở đây tôi sử dụng nó với Image. Sau đó, tất cả những gì chúng ta phải làm là thay đổi thuộc tính trạng thái đó bất cứ khi nào chiều cao hình ảnh thực tế cao hơn chiều cao tối thiểu của chúng ta.

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. 
     } 
    }} 
    /> 
} 

Đó là cách tôi giải quyết nó cho tôi.

p.s: Trong khi tìm kiếm, tôi nhận thấy rằng hỗ trợ không chính thức phản ứng tự nhiên minHeight và maxHeight nhưng chỉ dành cho iOS chứ không phải cho Android. Tôi sẽ không dám sử dụng chúng mặc dù. Đoạn mã trên hoạt động tốt và cho phép tôi kiểm soát.

Answer 5

Bạn có thể sử dụng minHeight hoặc flexBasis - nó tương tự.