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