float - react native flexbox grid

React Native Stylesheet: ¿qué hace{flex: 1}?

Question

React Native utiliza flexbox para el diseño. En todos los ejemplos que he visto, hacen algo como esto:

var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: ''row''
  }
});

Tengo curiosidad sobre el flex: 1 parte. Basado en la definición de Chris Coyier aquí https://css-tricks.com/snippets/css/a-guide-to-flexbox/ , flex: 1 debería ser lo mismo que flex-grow: 1 , pero para mí parece flex: 1 en React Native es equivalente a display: flex en CSS.

Aquí hay un CodePen que demuestra esa flex: 1 la forma en que los ejemplos de React Native lo usan no hace nada en CSS:

http://codepen.io/johnnyo/pen/BoKbpb

No es hasta que usemos display: flex en CSS hasta que flexbox comience a funcionar:

http://codepen.io/johnnyo/pen/epZXgz

Entonces, ¿esto significa que flex: 1 en React Native es equivalente a display: flex en CSS?

Answer 1

Al igual que usted, me costó entender esta etiqueta que no está documentada correctamente en el Código de Facebook, pero finalmente descubrí que hace dos cosas:

1. Los contenedores consideran que los niños con un atributo flex tienen una altura de 0 con el fin de determinar cuánto espacio ocupan.
2. Los componentes con flex: X expanden para ocupar cualquier espacio restante en su contenedor después de que se hayan distribuido otros componentes. Comparten este espacio extra en proporción con sus valores X.

El primer elemento es por qué flex: 1 puede parecer tener el mismo efecto que display: flex . Considere el siguiente código JSX:

<ExampleAppContainer>
    <Text>
        I get printed.
    </Text>
    <Text style={{flex: 1}}>
        But I don''t :(
    </Text>
</ExampleAppContainer>

Solo se imprime el primer componente de texto, porque se considera que el segundo tiene una altura de 0. ExampleAppContainer asigna suficiente espacio para el primer componente de texto, y no hay espacio para que el segundo se expanda.

Ahora considere este código:

<ExampleAppContainer style={{flex:1}}>
    <Text>
        I get printed.
    </Text>
    <Text style={{flex: 1}}>
        And so do I!
    </Text>
</ExampleAppContainer>

Como ExampleAppContainer tiene flex: 1 , se expande para ocupar tanto espacio como sea posible. Suponiendo que es el componente raíz de la parte React de su aplicación, generalmente será la pantalla completa del teléfono. A continuación, asigna suficiente espacio para el primer componente de texto y permite que el segundo componente de texto se expanda, ocupando el resto de la pantalla.

De esta manera, a menudo necesitará aplicar flex: 1 toda la jerarquía de componentes para permitir que sus componentes más internos con espacio flex: N expandan correctamente.

Answer 2

Hay una gran diferencia entre css flexbox y el implementado por Facebook. Muchas cosas en común, pero los valores predeterminados son muy diferentes. Específicamente:

Everything is display: flex by default. All the behaviors of block and inline-block can be expressed in term of flex but not the opposite.

flex: el atributo solo se usa cuando en el mismo nivel hay pocos componentes con diferentes valores de flex (flex: 1, flex: 3) significa que el segundo elemento debe ser 3 veces más grande que el primero. El atributo flex es el único compatible (sin compatibilidad de crecimiento / reducción).

Más información: https://github.com/facebook/css-layout

Answer 3

Muchos tutoriales usan flex: 1 , al igual que lo hizo en su ejemplo. La razón principal es porque a veces (dependiendo del elemento, como ListStyle por defecto, si mi memoria funciona) el componente no ocupará toda la pantalla / área si no define las dimensiones, como la altura (por ejemplo, height: ''400px'' ). Flex: es increíble porque mantiene las cosas receptivas para varios tamaños.

Pero debo tener en cuenta que para cualquier componente sin hermanos , el valor de flex es totalmente arbitrario. Ex. para su componente de nivel superior, podría decir flex: 43254315 y hace lo mismo que flex: 1 . Simplemente significa "ocupar todo el espacio" (cualquiera que sea "todo" que pueda ser).

Por otro lado, si tiene algunos componentes hermanos , entonces el valor flexible es muy importante. Por ejemplo, si un componente es flex: 2 y otro es flex: 3 , el primero ocupa 2/5 de la pantalla y el segundo ocupa 3/5 de la pantalla.

En resumen: dependiendo de sus estilos, puede parecer que flex: 1 es lo mismo que display: flex , pero eso es solo por la forma en que lo está usando en su ejemplo. Verás que actúa de manera muy diferente si solo le das algunos hermanos.

Answer 4

Un comentario a la respuesta de Jarek Potiuk: ''flex: 1'' hace algo en reacción nativa similar al comportamiento de crecimiento flexible. Incluso si es el único con flex: definido.

Los estilos como flexDirection, alignItems, justifyContent definen el estilo de los elementos secundarios del elemento. Similar a CSS Display: flex, que también define a los niños.

En contraste, flex: x define el elemento en sí.

Por ejemplo, si un componente contenedor tiene flexDirection: ''row'', alignItems: ''center''
Y hay 3 niños:

niño 1 tiene ancho 50

el niño 2 tiene flex 1 (o cualquier otro número, pero 1 es una práctica común)

niño 3 tiene ancho 50

Luego, el componente central se ''estirará'' para que los 3 hijos juntos llenen todo el ancho del componente principal.

Answer 5

esto es muy simple, solo piense que cuando dice flex: 1 a cualquier elemento, ese elemento obtiene toda la altura del elemento primario si este elemento tiene flex: 1 y no tiene elemento primario obtiene toda la altura del tamaño de la pantalla.

por ejemplo, desea tener un elemento contenedor que obtenga toda la altura de la pantalla y este elemento tiene tres elementos secundarios y cada elemento tiene una altura de pantalla de 1/3 para este ejemplo, solo obtenga el elemento primario flex: 1 y tres elementos secundarios flex: 1 / 3 ver código abajo

<View style={{flex: 1,backgroundColor: ''red''}}>

        <View style={{flex: 1/3, backgroundColor: ''green''}}></View>

        <View style={{flex: 1/3, backgroundColor: ''yellow''}}></View>

        <View style={{flex: 1/3, backgroundColor: ''pink''}}></View>

      </View>

Answer 6

flex: 1

1. Le dice a un componente que llene todo el espacio disponible (compartido entre otros componentes con el mismo padre).

2. Si hay componentes hermanos con valores flex , sus padres deben tener flex: 1 (o superior). Si un padre no tiene un ancho y una altura fijos o flex, el padre tendrá dimensiones de 0 y los hijos flex no serán visibles.