react-native - props - react native flexbox grid
flex vs flexGrow vs flexShrink vs flexBasis en React Native? (1)
Finalmente actualicé reaccionar nativo a 0.42 que incluye la introducción de
flexGrow
,
flexShrink
y
flexBasis
y el cambio (o corrección) de cómo se representa
flex
.
Sigo recibiendo errores como:
La vista se renderizó con un ancho / alto establecido explícitamente pero con un flexBasis 0. (Esto podría solucionarse cambiando flex: a flexGrow :) Ver:
¿Alguien puede explicar la diferencia entre
flex: 1
vs
flexGrow: 1
.
Si aplico uno u otro a una Vista, parece hacer cosas diferentes, pero ¿no debería hacer lo mismo?
Aquí hay un código de prueba para considerar:
render() {
return <View style={{flex: 1,backgroundColor: "cornflowerblue"}}>
<View style={{backgroundColor: "chartreuse"}}><Text>Nothing (17px)</Text></View>
<View style={{flex: 0, backgroundColor: "yellow"}}><Text>flex: 0 (17px)</Text></View>
<View style={{flex: 0, flexBasis: 10, backgroundColor: "brown"}}><Text>flex: 0, flexBasis: 10 (10px)</Text></View>
<View style={{flex: 0, flexGrow: 1, backgroundColor: "orange"}}><Text>flex: 0, flexGrow: 1 (97px)</Text></View>
<View style={{flex: 0, flexShrink: 1, backgroundColor: "tan"}}><Text>flex: 0, flexShrink: 1 (17px)</Text></View>
<View style={{flex: 0, flexGrow: 1, flexBasis: 10, backgroundColor: "purple"}}><Text>flex: 0, flexGrow: 1, flexBasis: 10 (90px)</Text></View>
<View style={{flex: 0, flexShrink: 1, flexBasis: 10, backgroundColor: "gray"}}><Text>flex: 0, flexShrink: 1, flexBasis: 10 (10px with 7px hidden below the next element)</Text></View>
<View style={{flex: 1, backgroundColor: "blue"}}><Text>flex: 1 (80px)</Text></View>
<View style={{flex: 1, flexBasis: 10, backgroundColor: "cornsilk"}}><Text>flex: 1, flexBasis: 10 (90px)</Text></View>
<View style={{flex: 1, flexGrow: 1, backgroundColor: "red"}}><Text>flex: 1, flexGrow: 1 (80px)</Text></View>
<View style={{flex: 1, flexShrink: 1, backgroundColor: "green"}}><Text>flex: 1, flexShrink: 1 (80px)</Text></View>
<View style={{flex: 1, flexGrow: 1, flexBasis: 10, backgroundColor: "aqua"}}><Text>flex: 1, flexGrow: 1, flexBasis: 10 (90px)</Text></View>
<View style={{flex: 1, flexShrink: 1, flexBasis: 10, backgroundColor: "pink"}}><Text>flex: 1, flexShrink: 1, flexBasis: 10 (90px)</Text></View>
</View>;
}
Aquí hay una captura de pantalla del código anterior:
width
y
height
agregados:
render() {
return <View style={{flex: 1,backgroundColor: "cornflowerblue"}}>
<View style={{flex: 0, backgroundColor: "orange"}}><Text>flex: 0 (17px)</Text></View>
<View style={{flex: 0, width: 700, height: 20, backgroundColor: "yellow"}}><Text>flex: 0, width: 700, height: 20 (20px)</Text></View>
<View style={{flex: 0, flexBasis: 10, width: 700, height: 20, backgroundColor: "brown"}}><Text>flex: 0, flexBasis: 10, width: 700, height: 20 (10px with 7px hidden below the next element)</Text></View>
<View style={{flex: 0, flexGrow: 1, width: 700, height: 20, backgroundColor: "orange"}}><Text>flex: 0, flexGrow: 1, width: 700, height: 20 (90px)</Text></View>
<View style={{flex: 0, flexShrink: 1, width: 700, height: 20, backgroundColor: "tan"}}><Text>flex: 0, flexShrink: 1, width: 700, height: 20 (20px)</Text></View>
<View style={{flex: 0, flexGrow: 1, flexBasis: 10, width: 700, height: 20, backgroundColor: "purple"}}><Text>flex: 0, flexGrow: 1, flexBasis: 10, width: 700, height: 20 (80px)</Text></View>
<View style={{flex: 0, flexShrink: 1, flexBasis: 10, width: 700, height: 20, backgroundColor: "gray"}}><Text>flex: 0, flexShrink: 1, flexBasis: 10, width: 700, height: 20 (10px with 7px hidden below the next element)</Text></View>
<View style={{flex: 1, backgroundColor: "orange"}}><Text>flex: 1 (70px)</Text></View>
<View style={{flex: 1, width: 700, height: 20, backgroundColor: "blue"}}><Text>flex: 1, width: 700, height: 20 (70px)</Text></View>
<View style={{flex: 1, flexBasis: 10, width: 700, height: 20, backgroundColor: "cornsilk"}}><Text>flex: 1, flexBasis: 10, width: 700, height: 20 (80px)</Text></View>
<View style={{flex: 1, flexGrow: 1, width: 700, height: 20, backgroundColor: "red"}}><Text>flex: 1, flexGrow: 1, width: 700, height: 20 (70px)</Text></View>
<View style={{flex: 1, flexShrink: 1, width: 700, height: 20, backgroundColor: "green"}}><Text>flex: 1, flexShrink: 1, width: 700, height: 20 (70px)</Text></View>
<View style={{flex: 1, flexGrow: 1, flexBasis: 10, width: 700, height: 20, backgroundColor: "aqua"}}><Text>flex: 1, flexGrow: 1, flexBasis: 10, width: 700, height: 20 (80px)</Text></View>
<View style={{flex: 1, flexShrink: 1, flexBasis: 10, width: 700, height: 20, backgroundColor: "pink"}}><Text>flex: 1, flexShrink: 1, flexBasis: 10, width: 700, height: 20 (80px)</Text></View>
</View>;
}
Aquí hay una captura de pantalla del código anterior:
flex: 0
(predeterminado)
-
flex: 0
-
El elemento toma el tamaño de los contenidos.
De acuerdo con la
documentation
, debe dimensionarse configurando accesorios de
width
yheight
pero parece ajustarse al contenido si no se configuran.
-
El elemento toma el tamaño de los contenidos.
De acuerdo con la
documentation
, debe dimensionarse configurando accesorios de
-
flex: 0, flexBasis: {{px}}
-
Element toma el tamaño dado por
flexBasis
-
Element toma el tamaño dado por
-
flex: 0, flexGrow: 1
-
Con
flex: 0
yflexGrow: 1
; es lo mismo que agregar el tamaño de los contenidos (en el ejemplo anterior es a) al tamaño de un elemento configurado paraflex: 1
. Es similar aflex: 1, flexBasis: 10
excepto que en lugar de agregar una cantidad de píxeles, está agregando el tamaño del contenido.
-
Con
-
flex: 0, flexShrink: 1
-
Con
flex: 0
yflexShrink: 1
, el elemento parece tomar el tamaño del contenido, en otras palabras, es lo mismo que soloflex: 0
. Apuesto a que hay situaciones en las que sería más grande que el contenido, pero aún no lo he visto.
-
Con
-
flex: 0, flexGrow: 1, flexBasis: {{px}}
-
Esto es lo mismo que
flex: 0, flexGrow: 1
excepto que en lugar de agregar el tamaño del contenido a un elementoflex: 1
, agrega el número dado de píxeles.
-
Esto es lo mismo que
-
flex: 0, flexShrink: 1, flexBasis: {{px}}
-
Esto es lo mismo que
flex: 0, flexBasis: {{px}}
.
-
Esto es lo mismo que
-
flex: 0, height: {{px}}
-
Con
flex: 0
, laheight
se trata comoflexBasis
. Si hay unaheight
y se establecenflexBasis
, se ignora laheight
.
-
Con
flex: 1
-
flex: 1
- El elemento ocupa espacio disponible. Consulte la documentation para obtener más detalles.
-
flex: 1, flexBasis: {{px}}
-
Con
flex: 1
yflexBasis: {{px}}
; El valor deflexBasis
se agrega al tamaño del elemento. En otras palabras, es como tomar un elementoflex: 1
y agregar el número de píxeles establecido porflexBasis
. Entonces, si un elementoflex: 1
es 50px, y agregaflexBasis: 20
el elemento ahora será 70px.
-
Con
-
flex: 1, flexGrow: 1
- ignorado
-
flex: 1, flexShrink: 1
- ignorado
-
flex: 1, flexGrow: 1, flexBasis: {{px}}
-
Esto es lo mismo que
flex: 1, flexBasis: {{px}}
ya que se ignoraflexGrow
.
-
Esto es lo mismo que
-
flex: 1, flexShrink: 1, flexBasis: {{px}}
-
Esto es lo mismo que
flex: 1, flexBasis: {{px}}
ya que se ignoraflexShrink
.
-
Esto es lo mismo que
-
flex: 1, height: {{px}}
-
Con
flex: 1
, laheight
se ignora. UseflexBasis
enflexBasis
lugar.
-
Con
Aquí están mis observaciones:
-
Consejo para la resolución de problemas:
asegúrese de que las vistas de los padres les den a los niños espacio para crecer / reducirse.
Observe el
flex: 1
en la vista principal, sin él, todos los elementos secundarios no se muestran como cabría esperar. -
Consejo para la resolución de problemas:
no utilice la
Hot Reloading
al probar estos valores, puede mostrar elementos incorrectamente después de volver a cargarlo varias veces. Recomiendo habilitarLive Reload
o usar command + r (mucho). -
El valor predeterminado de flex es
flex: 0
. Si no agrega un valor de estilo flexible, el valor predeterminado es 0. - Consejo para la resolución de problemas: si está tratando de descubrir por qué algo no se muestra como cree que debería, comience con el elemento principal (la mayoría) y asegúrese de que les da suficiente espacio para que los niños hagan lo que necesitan hacer. En otras palabras, intente configurarlo en flex: 1 y vea si eso ayuda, luego vaya al siguiente niño y repita.
-
Parece que el
width
siempre se considera conflexDirection: "column"
sin importar los otros accesorios flexibles. Lo mismo se aplica para laheight
conflexDirection: "row"
. -
Después de ejecutar estas pruebas, en general usaría
flexBasis
sobre laheight
ya queflexBasis
triunfa sobre laheight
.