Minimale Breite/Höhe in React Native

Question

Wie kann ich minimale Breite oder Höhe für React Native Komponente einstellen?

In CSS kann ich min-width/min-height verwenden

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

Es gibt keine minWidth/minHeight auf reagieren-native docs

Answer 1

minHeight, maxHeight, minWidth und maxWidth Eigenschaften werden als von reagieren-native Version unterstützt 0.29.0 für iOS und Android.

Answer 2

Sie können so etwas tun:

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

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

Answer 3

Ich war in der Lage, die Lösung für Sie zu erarbeiten. Hier ist eine funktionierende Demo ... https://rnplay.org/apps/vaD1iA

Und hier sind die wichtigsten Teile.

Zuerst ziehen Sie in den Geräteabmessungen ...

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

Hier ist die Button-Komponente, die für die Schaltfläche mit

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

Dann wird, wie Sie die Gerätebreite als Basis verwendet Hier sehen Sie, dass die Tastenbreite unabhängig von der Breite des Etiketteninhalts gleich ist.

Answer 4

Ich löste dies durch die onLayout Stütze verwendet wird, ist es sehr einfach:

Beispiel:

Schritt 1: Ich habe eine Stütze in unserem Staat zu schaffen, der die aktuelle Höhe halten wird des BildescurImgHeight genannt.

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

Schritt 2: Mit der in jedem prop View oder Element, die die onLayout prop unterstützt.

Hier verwende ich es mit einem Image. Dann müssen wir diese Zustandseigenschaft nur dann ändern, wenn die tatsächliche Bildhöhe kleiner als unsere Mindesthöhe ist.

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

Das ist, wie ich es für mich gelöst habe.

ps.s: Während meiner Suche habe ich festgestellt, dass die Reaktion native inoffiziell unterstützt minHeight und maxHeight aber nur für iOS und nicht für Android. Ich würde es jedoch nicht wagen, sie zu benutzen. Der obige Code funktioniert gut und gibt mir Kontrolle.

Answer 5

Sie können minHeight oder flexBasis verwenden - es ist ähnlich.