Utilizza flexbox per creare layout flessibili e reattivi in React Native.
Flexbox è uno strumento CSS che ti consente di creare layout unidimensionali flessibili. Ti consente di controllare la posizione degli elementi all'interno di un contenitore in modo da avere un maggiore controllo sulla presentazione dei tuoi contenuti sullo schermo.
Questo tutorial mostra come utilizzare flexbox in React Native per creare layout flessibili e reattivi. Imparerai come posizionare gli elementi figlio di un elemento contenitore utilizzando le proprietà flexbox.
Confronto del comportamento di Flexbox in React Native e Web Development
Se vuoi organizzare il contenuto dell'elemento contenitore usando flexbox in semplice CSS, devi usare il file display: flessibile proprietà.
contenitore { Schermo: flettere; }Ma con React Native, non è necessario impostare il display: flessibile proprietà. Questo perché React Native utilizza flexbox per impostazione predefinita per creare layout.
Ecco alcune differenze da tenere a mente
come si comporta flexbox quando viene utilizzato per allineare elementi HTML nelle app Web rispetto a come si comporta in React Native:- flexDirection predefinito a riga nelle applicazioni Web, ma per impostazione predefinita è colonna in Reagisci Nativo.
- alignContent predefinito a stirata nelle applicazioni web e avvio flessibile in Reagisci Nativo.
- flex Shrink il valore predefinito è 1 nel web e 0 in React Native.
Utilizzo delle proprietà Flexbox in React Native
Le proprietà Flexbox consentono di descrivere come allineare gli elementi figli dell'elemento contenitore. È necessario comprendere queste proprietà per creare layout complessi che soddisfino le esigenze dell'applicazione.
1. Utilizzo della proprietà flex in React Native
IL flettere proprietà determina come il Visualizzazione componente riempie lo schermo. Questa proprietà accetta un valore intero maggiore o uguale a 0. Il valore specifica la frazione dello schermo Visualizzazione componente dovrebbe occupare.
In questo esempio, stai creando una schermata con una vista singola da Libreria di componenti nativi di React:
importare Reagire da"reagire"
importare { Foglio di stile, Visualizza } da"nativo di reazione"
esportarepredefinitofunzioneApp() {
ritorno (
<>backroundColor: "#A020F0", flettere: 1}} />
</>
)
}
Ecco l'output:
Qui hai assegnato 1 come valore flessibile di Visualizzazione componente. IL Visualizzazione componente occupa l'intero schermo (100%) perché hai diviso lo spazio in un gruppo.
Diamo un'occhiata a un altro esempio:
importare Reagire da"reagire"
importare { Foglio di stile, Visualizza } da"nativo di reazione"
esportarepredefinitofunzioneApp() {
ritorno (backroundColor: "#A020F0", flettere: 1}} /> colore di sfondo: "#7cb48f", flettere: 3 }} />
</View>
)
}
Ecco il risultato:
Qui ne hai due Visualizzazione elementi all'interno di un altro Visualizzazione elemento. Il primo figlio è impostato per flettere: 1, e il secondo è impostato su flessione: 3. Quei valori dividono lo spazio tra i due bambini. Il primo occupa 1/4 dello schermo mentre il secondo occupa 3/4 dello schermo (lo schermo è diviso in 4 blocchi perché 1+3 = 4).
2. Utilizzo della proprietà flexDirection in React Native
Se guardi lo screenshot sopra, vedrai che gli elementi figlio sono uno sopra l'altro. Questo è il comportamento predefinito di flexbox in React Native (flexDirection il valore predefinito è il colonna valore).
Puoi anche impostare il flexDirection proprietà a riga, inversione di colonna, E riga inversa. Nell'esempio seguente, flexDirection è impostato per riga, quindi gli elementi figli sono affiancati:
importare Reagire da"reagire"
importare { Foglio di stile, Visualizza } da"nativo di reazione"cost styles = StyleSheet.create({
contenitore: {
colore di sfondo: "#00FF00",
flettere: 1,
alignItems: "centro",
direzione flessibile: "riga",
},
piazza: {
colore di sfondo: "#FF0000",
larghezza: 98,
altezza: 98,
margine: 4,
},
});
esportarepredefinitofunzioneApp() {
ritorno (
</View>
)
}
Ecco il risultato:
Impostazione del flexDirection A riga inversa mette i bambini fianco a fianco, ma inverte l'ordine. Allo stesso modo, il inversione di colonna posiziona i bambini uno sopra l'altro ma nella sequenza opposta a quella definita dal colonna.
3. Utilizzo di justifyContent in React Native
IL justifyContent La proprietà allinea gli elementi figlio di un contenitore flexbox lungo l'asse principale. Se la flexDirection è impostato per colonna, allora l'asse primario è l'asse verticale. Se è impostato su riga, allora è orizzontale.
I possibili valori di justifyContentSono avvio flessibile, estremità flessibile, centro, spazio-tra, spazio intorno, E spazio uniforme.
Nell'esempio seguente, flexDirection è impostato su rema e justifyContentè impostato per avvio flessibile:
importare Reagire da"reagire"
importare { Foglio di stile, Visualizza } da"nativo di reazione"cost styles = StyleSheet.create({
contenitore: {
colore di sfondo: "#00FF00",
flettere: 1,
giustificaContenuto: "avvio flessibile",
direzione flessibile: "riga",
},
piazza: {
colore di sfondo: "#FF0000",
larghezza: 98,
altezza: 98,
margine: 6,
},
});
esportarepredefinitofunzioneApp() {
ritorno (
</View>
)
}
Ecco l'output:
Se cambi il flexDirection A colonna, avvio flessibile si applicherà all'asse verticale. Quindi le scatole saranno impilate una sopra l'altra.
Collocamento justifyContent al centro (mentre l'asse primario è a colonna) centra le tre caselle figlie.
4. Utilizzo di alignItems in React Native
IL alignItems La proprietà determina il posizionamento degli elementi in un contenitore flexbox lungo l'asse secondario. Questo è l'opposto di justifyContent. Proprio come justifyContent si occupa dell'allineamento verticale, alignItems gestisce l'allineamento orizzontale. I possibili valori di alignItems Sono avvio flessibile, estremità flessibile, centro, E linea di base.
Nell'esempio seguente, flexDirection è impostato per riga E alignItemsè impostato per avvio flessibile:
importare Reagire da"reagire"
importare { Foglio di stile, Visualizza } da"nativo di reazione"cost styles = StyleSheet.create({
contenitore: {
colore di sfondo: "#00FF00",
flettere: 1,
alignItems: "avvio flessibile",
direzione flessibile: "riga",
},
piazza: {
colore di sfondo: "#FF0000",
larghezza: 98,
altezza: 98,
margine: 6,
},
});
esportarepredefinitofunzioneApp() {
ritorno (
</View>
)
}
Ecco l'output:
Se imposti il flexDirection proprietà a colonna E alignItems A centro, le caselle verranno posizionate una sopra l'altra e gli elementi secondari verranno allineati al centro.
5. Utilizzo di alignSelf in React Native
IL alignSelf La proprietà determina come un singolo elemento figlio deve allinearsi nel contenitore. Prevale alignItems, e i valori possibili sono avvio flessibile, estremità flessibile, centro, E linea di base.
Nell'esempio seguente, impostiamo un default alignItems proprietà e sovrascriverla utilizzando alignSelf:
importare Reagire da"reagire"
importare { Foglio di stile, Visualizza } da"nativo di reazione"cost styles = StyleSheet.create({
contenitore: {
colore di sfondo: "#00FF00",
flettere: 1,
alignItems: "centro",
giustificaContenuto: "centro",
direzione flessibile: "riga",
},
piazza: {
colore di sfondo: "#FF0000",
larghezza: 98,
altezza: 98,
margine: 6,
},
});
esportarepredefinitofunzioneApp() {
ritorno (alignSelf: "estremità flessibile" }]} /> alignSelf: "avvio flessibile" }]} />
)
}
Ecco il risultato:
Altre proprietà di Flexbox
Ci sono altre due proprietà che puoi usare quando crei un layout flexbox in React Native:
- flexWrap: Nel caso in cui i figli di un contenitore ne trabocchino. Utilizzo flexWrap per specificare se devono essere rimpiccioliti su una singola riga o racchiusi in più righe. Possibili valori per flexWrap Sono nowrap E avvolgere.
- spacco: Tu usi il spacco property per aggiungere spazi tra gli elementi della griglia nel contenitore. Il suo valore dovrebbe essere la dimensione dello spazio che desideri tra gli elementi. Puoi specificare il spacco proprietà utilizzando unità CSS come px, em o rem.
Ulteriori informazioni su React Native
Ora che conosci flexbox e sai come usarlo nella tua app React Native per creare layout flessibili e reattivi, è tempo che tu entri nel nocciolo di React Native.
