Share
In questo tutorial, imparerai come disporre le app React Native e come implementare i layout comunemente usati nelle app. Ciò include il layout dello stack, il layout della griglia e il layout assoluto. Partirò dal presupposto che tu conosca già le basi per lo styling di un'app React Native e come usare i CSS in generale, quindi non mi dilungherò troppo su StyleSheet.create e come aggiungere uno stile a diversi elementi.
Puoi trovare il codice sorgente completo per questo tutorial su GitHub.
Per semplificare le cose, utilizzeremo React Native per il Web. Con React Native per Web Starter, possiamo facilmente avviare un nuovo progetto React Native che può essere eseguito nel browser. Questo codice è compatibile al 100% con il progetto React Native. Creeremo un componente separato per ogni layout che implementeremo in modo che tu possa facilmente importarli in un normale progetto React Native, se lo desideri. Stiamo solo utilizzando React Native per Web perché è più facile da installare e utilizzare.
È possibile eseguire i seguenti comandi per impostare il progetto:
git clone https://github.com/grabcode/react-native-web-starter.git RNLayouts cd RNLayouts rm -rf .git npm installazione
Una volta completata l'installazione, navigare all'interno di app / componenti directory. Questo è dove i file sono su cui lavoreremo principalmente.
Apri il App.js file e sostituire il codice predefinito con il seguente:
import React, Component da 'react'; // importa i componenti che verranno creati qui Esporta classe App estende Component render () return (// usa i componenti qui);
Successivamente, puoi importare i componenti che creeremo e quindi renderli da questo file. Basta ricordare che qualsiasi componente che salviamo all'interno del layout la directory non dovrebbe essere resa con qualcos'altro. Ad esempio, se abbiamo layout / StackLayout.js, fai quanto segue App.js:
import React, Component da 'react'; // importa i componenti che creeremo qui import StackLayout da './layouts/StackLayout'; Esporta la classe App estende Component render () return ();
Puoi servire il progetto eseguendo il seguente comando:
npm run dev
Questo ti consente di accedervi nel browser visitando http: // localhost: 3000. Un ricaricamento di una pagina intera verrà attivato se si apporta una modifica a uno dei file attualmente importati dal App.js file.
I layout di React Native utilizzano un sottoinsieme di Flexbox. (Dico "sottoinsieme" perché non sono incluse tutte le funzionalità incluse nella specifica di Flexbox.) Quindi, se già conosci Flexbox, puoi immediatamente applicare tali abilità in React Native. Vale anche la pena notare che non ci sono float o unità basate sulla percentuale in React Native. Ciò significa che possiamo solo eseguire layout utilizzando Flexbox e il posizionamento CSS.
Il primo tipo di layout che implementeremo è il layout dello stack. Per l'orientamento verticale, impila gli elementi uno sopra l'altro, mentre per l'orientamento orizzontale, gli elementi vengono posizionati uno accanto all'altro. Diamo prima un'occhiata all'orientamento verticale:
Ecco il codice per realizzare il layout sopra:
Accentsconagua
import React, Component da 'react'; importare StyleSheet, View, Dimensions da 'react-native'; var height = Dimensions.get ('window'); var box_count = 3; var box_height = height / box_count; esporta la classe predefinita VerticalStackLayout estende Component render () return ( ); const styles = StyleSheet.create (container: flex: 1, flexDirection: 'column', box: height: box_height, box1: backgroundColor: '# 2196F3', box2: backgroundColor: '# 8BC34A ', box3: backgroundColor:' # e3aa1a '); Scoprendo il codice qui sopra, per prima cosa prendiamo l'altezza dello spazio disponibile per l'app da consumare. Quindi calcoliamo quale sarà l'altezza di ogni scatola. Dato che abbiamo tre scatole, la dividiamo per tre.
var height = Dimensions.get ('window'); var box_count = 3; var box_height = height / box_count;Per il markup, le scatole dovrebbero essere avvolte in un contenitore. Gli stili comuni sono dichiarati nel scatola oggetto e i colori di sfondo unici vengono applicati agli oggetti con un nome univoco (box1, box2, box3):
Per utilizzare Flexbox, è necessario utilizzare il flettere proprietà sul contenitore. Il valore è la quantità di spazio che consuma. Se è 1, significa che consumerà tutto lo spazio disponibile, a condizione che l'elemento non abbia fratelli. Daremo un'occhiata a un esempio di utilizzo flettere con fratelli più avanti.
flexDirection ti consente di specificare l'asse principale del layout. Per impostazione predefinita, questo è impostato su colonna. Ambientazione flexDirection a colonna significa che i bambini del contenitore saranno disposti verticalmente (impilati uno sopra l'altro) mentre lo impostano riga significa che i bambini saranno disposti orizzontalmente (fianco a fianco). Per raggiungere un'altezza uguale, impostare l'altezza del scatola a quello del valore che abbiamo calcolato in precedenza.
const styles = StyleSheet.create (container: flex: 1, flexDirection: 'column', box: height: box_height // imposta questo, box1: backgroundColor: '# 2196F3', box2: backgroundColor : '# 8BC34A', box3: backgroundColor: '# e3aa1a');
Ecco un'immagine per aiutarti a visualizzare il flusso dei contenuti in base a flexDirection che hai specificato.
Il metodo che ti ho appena mostrato è il modo manuale di fare le cose. Usando il Dimensioni non è possibile calcolare la larghezza o l'altezza degli elementi se l'app supporta sia l'orientamento verticale che orizzontale. Questo perché non appena l'utente capovolge il proprio dispositivo, la larghezza o l'altezza che è stata calcolata in precedenza sarà errata. React Native non la ricalcerà automaticamente per te, quindi l'app sembrerà strana.
Flexbox può effettivamente fare il calcolo per te se fornisci i valori corretti. Per ottenere lo stesso layout di cui sopra senza utilizzare il Dimensioni, tutto ciò che devi fare è specificare flex: 1 per tutte le caselle invece di specificare il altezza:
box: flex: 1,
Questo è ora un esempio di utilizzo flettere con i fratelli. Ora abbiamo tre fratelli con lo stesso flettere valore. Ciò significa che tutti e tre condivideranno lo spazio disponibile dal flettere il valore è lo stesso. (Puoi effettivamente usare qualsiasi flettere valore finché gli elementi figlio hanno tutti lo stesso valore).
Utilizzando questa conoscenza, ora puoi ottenere layout con intestazione, contenuto e un piè di pagina:
// header box1: flex: 1, backgroundColor: '# 2196F3', // content box2: flex: 10, backgroundColor: '# 8BC34A', // footer box3: flex: .5, backgroundColor: ' # e3aa1a '
Ecco come sarà:
Si noti che questo sarà statico. Quindi se il tuo contenuto principale diventa più alto dell'altezza massima disponibile, il resto dei tuoi contenuti sarà nascosto. Se prevedi che il tuo contenuto superi questo limite, puoi utilizzare il built-in ScrollView componente per generare automaticamente una barra di scorrimento verticale proprio come nelle pagine web.
Per implementare layout di stack orizzontali, tutto ciò che devi fare è cambiare il flexDirection a riga.
contenitore: flex: 1, flexDirection: 'row',
Se cambiamo la scatola flettere valore a 1, questo risulta nell'output seguente:
L'unica cosa che abbiamo cambiato è la flexDirection, che ora è impostato su riga. Poiché le caselle sono tutte impostate su flex: 1, avranno la stessa larghezza e altezza. Tutte le idee dal layout di stack verticale sono ugualmente applicabili a questo.
Se si desidera controllare la distribuzione dei bambini all'interno di un contenitore, si utilizza il justifyContent proprietà sul contenitore.
Di seguito sono riportati i cinque valori possibili che possono essere utilizzati con questa proprietà. Nei seguenti esempi, l'altezza di ciascuno dei bambini è diminuita per dimostrare come ognuno di essi apparirebbe. Non sareste in grado di vedere alcuna differenza se il flettere il valore era 1 per ciascuno dei bambini, perché finirebbero col consumare tutto lo spazio disponibile.
flex-start: gli elementi figlio sono allineati al punto di partenza. Si noti lo sfondo bianco proprio sotto l'ultimo bambino. Questo è il modo in cui sai che questo sta usando flex-start perché tutti i bambini sono allineati verso il punto di partenza. Questo lascia uno spazio vuoto verso la fine.
flex-end: gli elementi figlio sono allineati verso la linea di fondo. Si noti che questa volta lo spazio vuoto è al punto di partenza.
centro: gli elementi figlio sono posizionati verso il centro. Questa volta lo spazio vuoto è equamente diviso tra il punto iniziale e quello finale.
spazio-around: gli elementi figlio sono distribuiti in modo tale che ci sia uno spazio uguale attorno a ciascuno di essi. Ciò significa che gli elementi nella parte esterna avrebbero meno spazio sul loro lato esterno e lo spazio tra i due bambini sarà raddoppiato.
spazio tra: gli elementi figlio sono distribuiti in modo tale che ci sia una uguale quantità di spazio tra ciascuno di essi. 
Come avrai notato, ognuna di queste proprietà di stile dipende dall'altezza o dalla larghezza degli elementi figli. Dipende dalla larghezza se il flexDirection è riga, e sull'altezza se il flexDirection è colonna.
Per esempio, spazio tra non avrà alcun effetto su un layout di stack verticale se ognuno degli elementi figli sta usando flettere per controllare l'altezza. Questo perché non ci sarà più spazio per il divario tra ogni elemento figlio da consumare.
A prima vista, justifyContent e alignItems potrebbe sembrare che stiano facendo la stessa cosa Condividono anche tre possibili valori: flex-start, flex-end, e centro, con l'aggiunta di a allungare valore.
La principale differenza tra justifyContent e alignItems è l'asse su cui sono distribuiti i bambini. Come hai visto prima, justifyContent usa sempre l'asse primario durante la distribuzione di elementi figlio. Ma alignItems usa l'asse opposto a quello primario.
Sappiamo già che l'asse è determinato dal flexDirection è stato impostato. Quindi se il flexDirection è riga, l'asse primario scorre da sinistra a destra. Ciò significa che l'asse trasversale scorrerà dall'alto verso il basso. D'altra parte, se flexDirection è colonna quindi l'asse trasversale scorrerà da sinistra a destra.
Di seguito sono riportati alcuni esempi di justifyContent e alignItems implementato parallelamente al flexDirection di riga. Il primo utilizza justifyContent mentre il secondo usa alignItems.
flex-start: il posizionamento degli elementi è lo stesso, motivo per cui il alignItems l'implementazione sembra esattamente come justifyContent.
flex-end: ora iniziamo a vedere una differenza. Nel primo caso, si trova alla fine della riga della prima riga, mentre la seconda istanza sembra essere sulla linea di partenza dell'ultima riga. 
centro: centro ha la stessa idea del resto dei valori che abbiamo usato finora. Nel primo caso, gli oggetti sono centrati sull'asse x mentre nel secondo gli elementi sono centrati sull'asse y.
allungare: usa questo per far allungare gli elementi del bambino per riempire il contenitore. Questo è il valore predefinito per alignItems, quindi specificare questo valore è facoltativo. Hai già visto come funziona quando abbiamo implementato layout di stack verticali e orizzontali.Ecco il codice utilizzato negli esempi sopra. Gioca solo con i valori per il flexDirection, justifyContent e alignItems se vuoi vedere come appaiono:
import React, Component da 'react'; import StyleSheet, View da 'react-native'; Esporta la classe predefinita AlignItems estende Component render () return (); const styles = StyleSheet.create (wrapper: flex: 1, container: flex: .5, flexDirection: 'row', justifyContent: 'flex-start', // replace con flex-end o center borderBottomWidth : 1, borderBottomColor: '# 000', container2: flex: .5, flexDirection: 'row', alignItems: 'flex-start' // sostituisci con flex-end o center, box: width: 100, height: 100, box1: backgroundColor: '# 2196F3', box2: backgroundColor: '# 8BC34A', box3: backgroundColor: '# e3aa1a');
Se si desidera specificare l'allineamento dei singoli elementi all'interno di un contenitore, è possibile utilizzare il alignSelf proprietà. Tutti i valori possibili per allineare-articoli sono applicabili anche a questa proprietà. Ad esempio, puoi allineare un singolo elemento a destra del suo contenitore, mentre tutti gli altri sono allineati a sinistra.
React Native in realtà non è dotato di un sistema di layout di griglia, ma Flexbox è abbastanza flessibile da crearne uno. Usando le cose che abbiamo imparato finora, possiamo ricreare i layout di Grid usando Flexbox. Ecco un esempio:
Ed ecco il codice che crea quel layout:
import React, Component da 'react'; import StyleSheet, View da 'react-native'; Esporta la classe predefinita GridLayout estende Component render () return (); const styles = StyleSheet.create (row: flex: 1, flexDirection: 'row', justifyContent: 'space-between', marginBottom: 10, box: flex: 1, height: 100, backgroundColor: ' # 333 ',, box2: backgroundColor:' green ', box3: backgroundColor:' orange ', two: flex: 2);
Dal codice qui sopra, puoi vedere che stiamo emulando ciò che di solito fanno nei framework di griglia CSS. Ogni riga è avvolta in una vista separata e gli elementi della griglia sono al suo interno. Un valore predefinito flettere valore di 1 viene applicato a ciascun elemento in modo che condividano equamente lo spazio disponibile su ogni riga. Ma per gli articoli che hanno bisogno di consumare più spazio, un livello più alto flettere il valore è applicato Questo regola automaticamente la larghezza degli altri elementi in modo che possa contenere tutti gli elementi.
Se si desidera aggiungere spazi tra ogni elemento in una riga, è possibile aggiungere un riempimento a ciascuno di essi e quindi creare una scatola all'interno di ciascuno di essi..
Ciò risulta nell'output seguente:
React Native supporta solo assoluto e parente posizionamento. Ciò non dovrebbe tuttavia limitare i tuoi limiti, perché puoi sempre combinarli con Flexbox per posizionare i diversi elementi ovunque desideri.
Diamo un'occhiata a come raggiungeremmo quanto segue:
Possiamo ottenere questo facilmente se abbiamo il pieno controllo sui valori di posizionamento disponibili nel browser. Ma visto che siamo in React Native, dobbiamo prima pensare a questo modo in Flexbox e poi usare il posizionamento CSS per le piccole scatole.
Usando Flexbox, questo può essere ottenuto in due modi. Puoi usare riga o colonna per il flexDirection per il contenitore principale. Il modo in cui organizzi i vari elementi dipenderà dal metodo scelto. Qui useremo riga per il flexDirection quindi lo schermo sarà diviso in tre colonne. La prima colonna conterrà la casella arancione, la seconda colonna conterrà le caselle nere, grigie e verdi e la terza conterrà le caselle blu e piccole viola.
import React, Component da 'react'; import StyleSheet, View da 'react-native'; export default class Posizionamento estende Component render () return ();
Se sai già come verranno presentati tutti gli elementi, è solo questione di applicare le cose che abbiamo imparato finora. Dopotutto, non abbiamo davvero bisogno di applicare il posizionamento CSS sui big box, solo quelli piccoli.
La prima colonna ha solo la scatola arancione, quindi applica justifyContent: 'center' al suo contenitore dovrebbe fare il trucco. Nel caso tu abbia già dimenticato, flexDirection predefinito colonna. Questo significa che se si imposta justifyContent a centro, i bambini saranno allineati al centro dell'asse Y..
La seconda colonna ha sostanzialmente la stessa idea della prima, solo che questa volta non vogliamo allineare tutte le caselle al centro. Quello che vogliamo è che abbiano spazi uguali tra loro e justifyContent: 'spazio-tra' ottiene quel lavoro fatto. Ma allo stesso tempo vogliamo anche centrare tutti i bambini sull'asse X, così usiamo alignItems: 'center'.
L'unica parte difficile qui è che non dovresti applicarne alcuna larghezza proprietà al riquadro grigio perché vogliamo che si estenda fino a consumare tutta la larghezza del suo genitore. Dal momento che non ne abbiamo applicato nessuno larghezza, dovremmo applicare alignSelf: 'stretch' alla casella grigia in modo che consumerà tutta la larghezza del suo genitore.
Successivamente, per posizionare leggermente la piccola scatola rossa lontano dalla sua posizione relativa, usiamo posizione: relativa e quindi applicare superiore e sinistra valori perché la sua posizione relativa è intorno all'angolo superiore sinistro del suo genitore.
Per quanto riguarda la piccola scatola arancione, usiamo posizione: 'assoluto' perché abbiamo bisogno di allinearlo all'angolo in alto a destra del suo genitore. Questo funziona perché gli elementi posizionati in React Native sono vincolati al loro genitore.
La terza colonna fondamentalmente applica la stessa idea, quindi non lo spiegherò più.
const styles = StyleSheet.create (container: flex: 1, flexDirection: 'row', left: flex: 1, justifyContent: 'center', middle: flex: 5, justifyContent: 'space-between' , alignItems: 'center', right: flex: 1, justifyContent: 'center', alignItems: 'flex-end', box: width: 100, height: 100, backgroundColor: '# 333', big_green_box : backgroundColor: 'green', big_orange_box: backgroundColor: 'orange', big_lightblue_box: backgroundColor: '# 03A9F4', big_gray_box: height: 100, alignSelf: 'stretch', backgroundColor: '#ccc' , inner_box: width: 20, height: 20,, red_box: position: 'relative', backgroundColor: 'red', top: 10, left: 10, orange_box: position: 'absolute', backgroundColor: ' orange ', top: 10, right: 10, purple_box: position:' absolute ', backgroundColor:' purple ', bottom: 10, right: 10, black_box: position:' relative ', backgroundColor:' black ' );
Successivamente, proviamo a implementare un layout di intestazione e piè di pagina fisso. Questo si trova comunemente nelle app con navigazione a schede; le schede sono fissate nella parte inferiore dello schermo mentre il contenuto principale può essere fatto scorrere.
Per noi per realizzare questo, abbiamo bisogno di usare il ScrollView componente in modo che se il contenuto principale supera l'altezza del contenitore, React Native genererà automaticamente una barra di scorrimento verticale. Questo ci permette di aggiungere marginTop e MarginBottom al contenitore del contenuto principale in modo che l'intestazione e il piè di pagina non ostacolino il contenuto principale. Inoltre, si noti che il sinistra e destra i valori dell'intestazione e del piè di pagina sono impostati su 0 in modo che consumino tutta la larghezza del dispositivo.
import React, Component da 'react'; import StyleSheet, View, ScrollView da 'react-native'; esporta la classe predefinita FixedHeaderFooter estende Component render () return (); const styles = StyleSheet.create (container: flex: 1, flexDirection: 'column', justifyContent: 'center', header: height: 40, position: 'absolute', left: 0, right: 0 , in alto: 0, backgroundColor: '# 03A9F4', zIndex: 10, contenuto: alignItems: 'center', marginTop: 50, marginBottom: 40, footer: height: 40, position: 'absolute', left: 0, right: 0, bottom: 0, backgroundColor: '# 8BC34A', box: width: 100, height: 100, backgroundColor: '# 333', marginBottom: 10);
Ecco come apparirà:
React Native ha una grande comunità dietro di esso, quindi non c'è da meravigliarsi che alcune librerie siano già state create per facilitare l'implementazione dei layout. In questa sezione, ti presenterò una libreria chiamata React Native Easy Grid. Puoi usarlo per descrivere come vuoi disporre la tua app facendo uso di Griglia, Riga, e Col componenti.
Puoi installarlo con il seguente comando:
npm installa react-native-easy-grid --save
Importa la libreria ed estrai i diversi componenti nel tuo file.
import React, Component da 'react'; import StyleSheet, View da 'react-native'; import Col, Row, Grid da "react-native-easy-grid";
Il Griglia componente è usato per avvolgere tutto. Col è usato per creare una colonna, e Riga è usato per creare righe. Puoi specificare a taglia proprietà per entrambi Riga e Col, sebbene lo abbiamo usato solo su Riga sotto. Se la dimensione non è specificata, dividerà ugualmente lo spazio disponibile tra il Col casi.
In questo caso, ce ne sono solo due, quindi l'intero schermo è diviso in due colonne. La prima colonna viene quindi divisa in due righe. Qui abbiamo specificato a taglia, ma in realtà puoi saltarlo se hai solo bisogno di righe uguali, come abbiamo fatto in seguito.
Esporta la classe predefinita FlexboxGridLibrary estende Component render () return (); |
|
Una volta fatto, tutto ciò che devi fare è aggiungere lo stile per le righe e le colonne:
const styles = StyleSheet.create (orange_box: backgroundColor: 'orange', green_box: backgroundColor: 'green', gray_box: backgroundColor: 'gray');
Come avrai notato, React Native Easy Grid ha un'API molto intuitiva.
In questo tutorial, hai imparato come disporre le app React Native. Nello specifico, hai imparato come utilizzare Flexbox di React Native per posizionare le cose. Hai anche imparato a usare React Native Easy Grid, che semplifica l'implementazione di Flexbox.
.
