react-native - props - react native flexbox grid

flex vs flexGrow vs flexShrink vs flexBasis en React Native?

Question

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?

Answer 1

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 y height pero parece ajustarse al contenido si no se configuran.
• flex: 0, flexBasis: {{px}}
  • Element toma el tamaño dado por flexBasis
• flex: 0, flexGrow: 1
  • Con flex: 0 y flexGrow: 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 para flex: 1 . Es similar a flex: 1, flexBasis: 10 excepto que en lugar de agregar una cantidad de píxeles, está agregando el tamaño del contenido.
• flex: 0, flexShrink: 1
  • Con flex: 0 y flexShrink: 1 , el elemento parece tomar el tamaño del contenido, en otras palabras, es lo mismo que solo flex: 0 . Apuesto a que hay situaciones en las que sería más grande que el contenido, pero aún no lo he visto.
• 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 elemento flex: 1 , agrega el número dado de píxeles.
• flex: 0, flexShrink: 1, flexBasis: {{px}}
  • Esto es lo mismo que flex: 0, flexBasis: {{px}} .
• flex: 0, height: {{px}}
  • Con flex: 0 , la height se trata como flexBasis . Si hay una height y se establecen flexBasis , se ignora la height .

flex: 1

• flex: 1
  • El elemento ocupa espacio disponible. Consulte la documentation para obtener más detalles.
• flex: 1, flexBasis: {{px}}
  • Con flex: 1 y flexBasis: {{px}} ; El valor de flexBasis se agrega al tamaño del elemento. En otras palabras, es como tomar un elemento flex: 1 y agregar el número de píxeles establecido por flexBasis . Entonces, si un elemento flex: 1 es 50px, y agrega flexBasis: 20 el elemento ahora será 70px.
• 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 ignora flexGrow .
• flex: 1, flexShrink: 1, flexBasis: {{px}}
  • Esto es lo mismo que flex: 1, flexBasis: {{px}} ya que se ignora flexShrink .
• flex: 1, height: {{px}}
  • Con flex: 1 , la height se ignora. Use flexBasis en flexBasis lugar.

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 habilitar Live 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 con flexDirection: "column" sin importar los otros accesorios flexibles. Lo mismo se aplica para la height con flexDirection: "row" .
• Después de ejecutar estas pruebas, en general usaría flexBasis sobre la height ya que flexBasis triunfa sobre la height .