Reagisci foglio di stile nativo: cosa fa {flex: 1}?

Question

React Native utilizza il flexbox per il layout. In tutti gli esempi che ho visto, che fanno qualcosa di simile:

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

mi incuriosisce la parte flex: 1. Basato sulla definizione di Chris Coyier qui https://css-tricks.com/snippets/css/a-guide-to-flexbox/, flex: 1 dovrebbe essere lo stesso di flex-grow: 1, ma a me sembra flex: 1 in React Native equivale a display: flex in CSS.

Ecco un CodePen che dimostra che flex: 1 il modo Reagire esempi nativi usano non fa nulla in CSS:

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

Non fino a quando usiamo display: flex in CSS fino FlexBox inizia a lavorare:

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

Quindi questo significa che flex: 1 in Reagire nativo è equivalente a display: flex in C SS?

Answer 1

C'è una bella differenza tra css flexbox e quello implementato da Facebook. Molte cose in comune, ma le impostazioni predefinite sono molto diverse. In particolare:

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: attributo viene utilizzato solo quando allo stesso livello ci sono pochi componenti con differenti valori di flex (flex: 1, flex: 3) indica che il secondo elemento deve essere di 3 volte più grande del primo uno. l'attributo flex è l'unico supportato (nessun supporto di crescita/riduzione).

Maggiori informazioni: https://github.com/facebook/css-layout

Answer 2

Un'osservazione alla risposta di Jarek Potiuk: 'flex: 1' fa fare qualcosa a reagire nativo simile al comportamento flex-crescere. Anche se è l'unico con flex: definito.

Stili come flexDirection, alignItems, justifyContent definiscono lo stile dei figli dell'elemento. Simile a CSS Display: flex, che definisce anche i bambini.

Al contrario, flex: x definisce l'elemento stesso.

E.g. se un componente contenitore ha flexDirection: 'fila', alignItems: 'centro'
E ci sono 3 bambini:

bambino 1 ha larghezza 50

bambino 2 ha flex 1 (o qualsiasi altro numero, ma 1 è pratica comune)

bambino 3 è larghezza 50

Poi la componente centrale sarà 'stretch' in modo che i 3 figli insieme riempire l'intera larghezza del componente genitore.

Answer 3

Come ti ho faticato a capire questo tag che non è documentato correttamente su Facebook codice, ma alla fine ho scoperto che fa due cose:

1. Contenitori prendere in considerazione tutti i bambini con un attributo flex ad avere un'altezza di 0 allo scopo di determinare quanto spazio occupano.
2. I componenti con flex: X si espandono per occupare qualsiasi spazio rimanente nel loro contenitore dopo che altri componenti sono stati disposti. Condividono questo spazio in più in proporzione ai loro valori X.

Il primo elemento è il motivo per cui flex: 1 può sembrare avere lo stesso effetto di display: flex. Si consideri il seguente codice JSX:

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

Solo il primo componente di testo viene stampato, in quanto il secondo è considerato di avere un'altezza pari a 0. ExampleAppContainer assegna uno spazio sufficiente per il primo componente del testo, e non v'è alcuna spazio per il secondo ad espandersi.

Ora considerare questo codice:

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

Dal ExampleAppContainer ha flex: 1, si espande per occupare il maggior spazio che può. Supponendo che sia il componente root per la parte React della tua app, di solito questo sarà l'intero schermo del telefono. Successivamente assegna uno spazio sufficiente per il primo componente di testo e consente al secondo componente di testo di espandersi, occupando il resto dello schermo.

In questo modo è spesso necessario applicare flex: 1 fino in fondo alla gerarchia dei componenti per consentire ai componenti interni di espandersi correttamente nella stanza flex: N.

Answer 4

Un sacco di esercitazioni utilizzano flex: 1, in modo molto simile a come è stato nell'esempio. Il motivo principale è perché a volte (a seconda dell'elemento, come ad esempio ListStyle per impostazione predefinita, se la mia memoria viene pubblicata) il componente non occuperà l'intero schermo/area se non definisci le dimensioni, ad esempio l'altezza (ad es. height: '400px'). Flex: è fantastico perché mantiene le cose reattive per varie dimensioni.

Ma devo notare che per qualsiasi componente con senza fratelli, il valore per flex è totalmente arbitrario. Ex. per il tuo componente di primo livello, potresti dire flex: 43254315 e fa la stessa cosa di flex: 1. Significa solo "occupare l'intero spazio" (qualunque cosa "intero" possa essere).

D'altra parte, se si dispone di alcuni componenti di pari livello, il valore di Flex è molto importante. Ad esempio, se un componente è flex: 2 e un altro è flex: 3, il primo occupa 2/5 dello schermo e il secondo occupa 3/5 dello schermo.

In breve: a seconda delle stili, potrebbe guardare come flex: 1 è lo stesso di display: flex, ma questo è solo a causa del modo in cui lo si utilizza nel tuo esempio. Vedrai che agirà in modo molto diverso se gli dai dei fratelli.