react community awesome react-native

community - Anchura/altura mínima en React Native



react-native-vector-icons (5)

¿Cómo puedo establecer el ancho o alto mínimo para el componente React Native?

En css, puedo usar min-width / min-height

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

No hay minWidth / minHeight en documentos nativos de reacción


Pude encontrar la solución para usted. Aquí hay una demostración de trabajo ... https://rnplay.org/apps/vaD1iA

Y aquí están las partes clave.

Primero, jala las dimensiones del dispositivo ...

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

Aquí está el componente del botón, que utiliza el ancho del dispositivo como base para el botón con

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

Entonces, como puede ver aquí, el ancho del botón será el mismo independientemente del ancho del contenido de la etiqueta.


Puedes hacer algo así:

_getButtonStyle() { var style = {height:36,padding:8} if(this.props.buttonText.length < 4){ style.width = 64 } return style }


Puedes usar minHeight o flexBasis - es similar.


onLayout esto usando el soporte onLayout , es muy fácil:

Ejemplo:

Paso 1: creo un pilar en nuestro estado que mantendrá la altura actual de la imagen llamada curImgHeight .

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

Paso 2: Use la utilería en cualquier View o Element que admita la utilería onLayout .

Aquí lo uso con una Image . Entonces, todo lo que tenemos que hacer es cambiar esa propiedad de estado siempre que la altura real de la imagen sea superior a nuestra altura mínima.

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

Así lo resolví por mí.

pd: durante mi búsqueda encontré que reaccionar de forma nativa no es oficialmente compatible con maxHeight y maxHeight pero solo para iOS y no para Android. Aunque no me atrevería a usarlos. El código anterior funciona bien y me da control.


Las propiedades minHeight , maxHeight , minWidth y maxWidth son compatibles a partir de la versión 0.29.0 nativa de reactivos para iOS y Android .

Aquí está la descripción de maxHeight de la documentación nativa reactiva . Esta descripción también se aplica a otras propiedades de estilo mín. / Máx.

maxHeight es la altura máxima para este componente, en píxeles lógicos.

Funciona de manera similar a max-height en CSS, pero en React Native debe usar puntos o porcentajes. Ems y otras unidades no son compatibles.

Consulte https://developer.mozilla.org/en-US/docs/Web/CSS/max-height para obtener más detalles.

Un ejemplo ficticio:

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