Share
În acest tutorial, veți afla cum să stabiliți aplicațiile React Native și cum să implementați machetele utilizate în mod frecvent în aplicații. Acestea includ layout-ul Stack, Grid Layout și Layout Absolute. Voi presupune că deja știți elementele de bază ale stilului aplicației React Native și cum să folosiți CSS în general, așa că nu voi sta prea mult StyleSheet.create și cum să adăugați stil pentru diferite elemente.
Puteți găsi codul sursă complet pentru acest tutorial pe GitHub.
Pentru a face lucrurile mai ușoare, vom folosi React Native for Web. Cu React Native for Web Starter, putem să lansăm cu ușurință un nou proiect React Native care poate fi rulat în browser. Acest cod este 100% compatibil cu proiectul React Native. Vom crea o componentă separată pentru fiecare aspect pe care îl vom implementa, astfel încât să îi puteți importa cu ușurință într-un proiect React Nativ normal, dacă doriți. Folosim doar React Native pentru Web, pentru că este mai ușor să îl punem în funcțiune.
Puteți executa următoarele comenzi pentru a configura proiectul:
git clone https://github.com/grabcode/react-native-web-starter.git RNLayouts cd RNLayouts rm -rf .git npm instalare
După ce ați terminat instalarea, navigați în interiorul app / componente director. Aici sunt dosarele în care vom lucra în primul rând.
Deschide App.js fișier și înlocuiți codul implicit cu următoarele:
import React, Component de la "reacție"; // importați componentele pe care le vom crea aici; clasa de export App extinde Component render () return (// utilizați componentele de aici);
Mai târziu, puteți importa componentele pe care le vom crea și apoi le vom reda din acest fișier. Amintiți-vă că orice componentă pe care o salvăm în interiorul aspecte directorul nu ar trebui să fie redat cu nimic altceva. De exemplu, dacă avem layouts / StackLayout.js, faceți următoarele în App.js:
import React, Component de la "reacție"; // importați componentele pe care le vom crea aici import StackLayout din './layouts/StackLayout'; clasa de export App extinde Component render () return ();
Puteți executa proiectul executând următoarea comandă:
npm run dev
Aceasta vă permite accesarea acestuia în browser vizitând http: // localhost: 3000. O reîncărcare completă a paginii va fi declanșată dacă efectuați o modificare a oricărui fișier importat în prezent din App.js fişier.
Layouts în React Native utilizează un subset de Flexbox. (Eu spun "subset", deoarece nu toate caracteristicile care sunt în specificația Flexbox sunt incluse.) Deci, dacă deja știți Flexbox, atunci puteți aplica cu ușurință aceste abilități în React Native. De asemenea, merită menționat faptul că în React Native nu există flotoare sau unități bazate pe procentaje. Aceasta înseamnă că nu putem face decât machete folosind poziționarea Flexbox și CSS.
Primul tip de aspect pe care îl vom implementa este layout-ul Stack. Pentru orientare pe verticală, se stivează elementele una peste alta, în timp ce pentru orientare orizontală elementele sunt plasate una lângă alta. Să aruncăm o privire mai întâi la orientarea verticală:
Iată codul pentru a realiza aspectul de mai sus:
Accentsconagua
import React, Component de la "reacție"; importați StyleSheet, View, Dimensions de la "reactive-native"; var height = Dimensions.get ("fereastră"); var box_count = 3; var box_height = înălțime / cutie_count; clasa de export implicită VerticalStackLayout extinde Component render () return ( ); const stiles = StyleSheet.create container: flex: 1, flexDirection: 'coloana', caseta: height: box_height, box1: backgroundColor: '# 2196F3', box2: backgroundColor: 8BC34A ', caseta 3: backgroundColor:' # e3aa1a '); Descoperind codul de mai sus, primim în primul rând înălțimea spațiului disponibil pentru consum. Apoi vom calcula care va fi înălțimea fiecărei cutii. Deoarece avem trei cutii, îl împărțim cu trei.
var height = Dimensions.get ("fereastră"); var box_count = 3; var box_height = înălțime / cutie_count;Pentru marcare, cutiile trebuie ambalate în interiorul containerului. Stilurile comune sunt declarate în cutie obiect și culori unice de fond sunt aplicate obiectelor numite unic (Box1, Box2, box3):
Pentru a utiliza Flexbox, trebuie să utilizați contracta proprietate pe container. Valoarea este cantitatea de spațiu pe care o va consuma. Daca este 1, înseamnă că va consuma tot spațiul disponibil, cu condiția ca elementul să nu aibă nici frați. Vom arunca o privire asupra unui exemplu de utilizare contracta cu frații mai târziu.
flexDirection vă permite să specificați axa primară a aspectului. În mod prestabilit, aceasta este setată la coloană. reglaj flexDirection la coloană înseamnă că copiii containerului vor fi așezate vertical (stivuite unul peste celălalt) în timp ce îl fixează rând înseamnă că copiii vor fi așezați orizontal (unul lângă celălalt). Pentru a atinge o înălțime egală, setați înălțimea cutie la cea a valorii pe care am calculat-o mai devreme.
stiluri const = StyleSheet.create (container: flex: 1, flexDirection: 'coloana', caseta: height: box_height // setare aceasta, box1: backgroundColor: '# 2196F3', box2: backgroundColor : '# 8BC34A', caseta 3: backgroundColor: '# e3aa1a');
Iată o imagine care vă ajută să vizualizați modul în care va curge conținutul în funcție de flexDirection pe care le-ați specificat.
Metoda pe care tocmai ți-am arătat-o este modul manual de a face lucrurile. Utilizarea Dimensiuni pentru a calcula lățimea sau înălțimea elementelor va eșua dacă aplicația dvs. acceptă atât orientarea portretului, cât și peisajul. Asta pentru că, imediat ce utilizatorul le-a răsturnat dispozitivul, lățimea sau înălțimea pe care le-ați calculat mai devreme va fi greșită. Răspundeți că Native nu-l va recompune automat pentru tine, așa că aplicația se termină în căutarea ciudată.
Flexbox poate face de fapt calculul pentru tine, dacă furnizați doar valorile corecte. Pentru a obține același aspect ca mai sus, fără a utiliza Dimensiuni, tot ce trebuie să faceți este să specificați flex: 1 pentru toate cutiile în loc de a specifica înălţime:
cutie: flex: 1,
Acesta este acum un exemplu de utilizare contracta cu frații. Acum avem trei frați cu același lucru contracta valoare. Aceasta înseamnă că toți cei trei vor împărți în mod egal spațiul disponibil de la contracta valoarea este aceeași. (Puteți folosi de fapt orice contracta valoare atâta timp cât elementele copilului au aceeași valoare.)
Folosind aceste cunoștințe, acum puteți realiza planuri cu antet, conținut și subsol:
// caseta header1: flex: 1, backgroundColor: '# 2196F3', // caseta content2: flex: 10, backgroundColor: '# 8BC34A' // footer box3: flex: .5, backgroundColor: # e3aa1a '
Iată cum va arăta:
Rețineți că aceasta va fi statică. Deci, dacă conținutul dvs. principal devine mai mare decât înălțimea maximă disponibilă, restul conținutului dvs. va fi ascuns. Dacă vă așteptați ca conținutul dvs. să depășească această limită, puteți utiliza modulul încorporat ScrollView componentă pentru generarea automată a unei bare de derulare verticale, la fel ca în paginile web.
Pentru a implementa layout-urile orizontale, tot ce trebuie să faceți este să schimbați flexDirection la rând.
container: flex: 1, flexDirection: 'rând',
Dacă schimbăm caseta contracta valoarea înapoi la 1, rezultă următoarele rezultate:
Singurul lucru pe care l-am schimbat este flexDirection, care este setat acum rând. Deoarece casetele sunt setate la flex: 1, acestea vor avea aceeași lățime și înălțime. Toate ideile din structura verticală a stivei sunt la fel de aplicabile acestui aspect.
Dacă doriți să controlați distribuția copiilor într-un container, utilizați justifyContent proprietate pe container.
Mai jos sunt cele cinci valori posibile care pot fi utilizate cu această proprietate. În următoarele exemple, înălțimea fiecăruia dintre copii este diminuată pentru a demonstra cum ar arăta fiecare. Nu ai putea să vezi nicio diferență dacă contracta valoarea a fost 1 pentru fiecare dintre copii, pentru că ei vor sfârși consumând tot spațiul disponibil.
flex-start: elementele copilului sunt aliniate spre punctul de plecare. Observați fundalul alb chiar sub ultimul copil. Acesta este modul în care știi că folosește acest lucru flex-start deoarece toți copiii sunt aliniați la punctul de plecare. Acest lucru lasă un spațiu gol spre sfârșit.
flex-end: elementele copilului sunt aliniate la linia de capăt. Observați că de data aceasta spațiul gol este la punctul de plecare.
centru: elementele copilului sunt plasate spre centru. De data aceasta spațiul gol este împărțit în mod egal între punctul de plecare și punctul de terminare.
spațiu-în jurul valorii de: elementele copilului sunt distribuite astfel încât să existe un spațiu egal în jurul fiecăruia. Aceasta înseamnă că elementele din partea exterioară ar avea mai puțin spațiu pe partea lor exterioară, iar spațiul dintre cei doi copii este dublat.
spațiu între: elementele copilului sunt distribuite astfel încât să existe o cantitate egală de spațiu între fiecare dintre ele. 
După cum probabil ați observat, fiecare dintre aceste proprietăți de stil depinde de înălțimea sau lățimea elementelor copilului. Este dependentă de lățimea dacă flexDirection este rând, și pe înălțimea dacă flexDirection este coloană.
De exemplu, spațiu între nu va avea nici un efect asupra unui layout vertical de stivă dacă fiecare dintre elementele copilului utilizează contracta pentru a controla înălțimea. Acest lucru se datorează faptului că nu va mai rămâne spațiu pentru decalajul dintre fiecare element de copil care trebuie consumat.
La prima vedere, justifyContent și alignItems ar putea să pară că fac același lucru. Ei au, de asemenea, trei valori posibile: flex-start, flex-end, și centru, cu adăugarea unui a întinde valoare.
Principala diferență între justifyContent și alignItems este axa pe care sunt distribuite copiii. După cum ați văzut mai devreme, justifyContent utilizează întotdeauna axa primară atunci când distribuie elementele copilului. Dar alignItems utilizează o axă opusă celei primare.
Știm deja că axa este determinată de flexDirection care a fost stabilită. Deci, dacă flexDirection este rând, axa primară curge de la stânga la dreapta. Aceasta înseamnă că axa transversală va curge de sus în jos. Pe de altă parte, dacă flexDirection este coloană atunci axa transversală va curge de la stânga la dreapta.
Mai jos sunt câteva exemple de justifyContent și alignItems puse în aplicare împreună cu flexDirection de rând. Primul folosește justifyContent în timp ce al doilea utilizează alignItems.
flex-start: poziționarea elementelor este aceeași, motiv pentru care alignItems implementarea arată exact ca justifyContent.
flex-end: acum începem să vedem o diferență. În primul rând, este la capătul liniei primului rând, în timp ce a doua instanță pare să se afle la linia de start a ultimului rând. 
centru: centru are aceeași idee ca restul valorilor pe care le-am folosit până acum. În primul rând, elementele sunt centrate pe axa x, în timp ce în cel de-al doilea, elementele sunt centrate pe axa y.
întinde: utilizați acest lucru pentru ca elementele copilului să se întindă pentru a umple recipientul. Aceasta este valoarea implicită pentru alignItems, specificarea acestei valori este opțională. Ați văzut deja cum funcționează acest lucru atunci când implementăm layout-uri de stivă verticală și orizontală.Iată codul folosit în exemplele de mai sus. Doar jucați cu valorile pentru flexDirection, justifyContent și alignItems dacă doriți să vedeți cum arată:
import React, Component de la "reacție"; importați StyleSheet, View din "reactive-native"; clasa implicită pentru export AlignItems extinde Component render () return (); const stiles = StyleSheet.create (wrapper: flex: 1, container: flex: .5, flexDirection: 'row', justifyContent: 'flex-start', // inlocuieste cu border-end sau center borderBottomWidth : 1, borderBottomColor: '# 000', container2: flex: .5, flexDirection: 'row', alignItems: 'flex-start' înălțimea: 100, caseta1: backgroundColor: '# 2196F3', caseta2: backgroundColor: '# 8BC34A', box3: backgroundColor: '# e3aa1a');
Dacă doriți să specificați alinierea elementelor individuale într-un container, puteți utiliza funcția alignSelf proprietate. Toate valorile posibile pentru aliniați-elemente se aplică și acestei proprietăți. De exemplu, puteți alinia un singur element la dreapta containerului, în timp ce restul sunt aliniate la stânga.
Reacționează că nativul nu vine într-adevăr cu un sistem de structurare a rețelei, dar Flexbox este suficient de flexibil pentru a crea unul. Folosind lucrurile pe care le-am învățat până acum, putem recrea machetele Grid folosind Flexbox. Iată un exemplu:
Iată codul care creează acel aspect:
import React, Component de la "reacție"; importați StyleSheet, View din "reactive-native"; exportare la exportul clasei GridLayout extinde Component render () return (); const stiles = StyleSheet.create (rând: flex: 1, flexDirection: 'row', justifyContent: 'space-between', marginBottom: 10, box: flex: 1, height: 100, backgroundColor: # 333 ',, caseta2: backgroundColor:' verde ', caseta3: backgroundColor:' orange ', două: flex: 2);
Din codul de mai sus, puteți vedea că emulam ceea ce fac, de obicei, în cadrele de rețea CSS. Fiecare rând este înfășurat într-o vedere separată, iar elementele grilei se află în interiorul acestuia. O valoare implicită contracta valoarea 1 se aplică fiecărui element astfel încât să împartă în mod egal spațiul disponibil pe fiecare rând. Dar pentru elementele care trebuie să consume spațiu mai mare, o valoare mai mare contracta se aplică valoarea. Acest lucru ajustează automat lățimea celorlalte elemente, astfel încât să se potrivească tuturor elementelor.
Dacă doriți să adăugați spații între fiecare element dintr-un rând, puteți adăuga câte un element de completare la fiecare dintre ele și apoi creați o casetă în interiorul fiecăruia.
Rezultă astfel:
Răspundeți Domnul sprijină numai absolut și rudă de poziționare. Acest lucru nu ar trebui să vă limiteze, totuși, deoarece puteți oricând să le combinați cu Flexbox pentru a poziționa elementele diferite oriunde doriți.
Să ne uităm la modul în care vom realiza următoarele:
Putem realiza acest lucru cu ușurință dacă avem o comandă deplină asupra valorilor de poziționare disponibile în browser. Dar din moment ce suntem în React Native, trebuie să ne gândim mai întâi la modul Flexbox și apoi să folosim poziționarea CSS pentru cutiile mici.
Utilizând Flexbox, acest lucru se poate realiza în două moduri. Puteți folosi fie rând sau coloană pentru flexDirection pentru containerul principal. Modul în care aranjați diferitele elemente va depinde de metoda pe care o alegeți. Aici vom folosi rând pentru flexDirection astfel încât ecranul va fi împărțit în trei coloane. Prima coloană va conține cutia portocalie, a doua coloană va conține cutiile negre, gri și verde, iar a treia va conține cutiile purpurii albastru și mic.
import React, Component de la "reacție"; importați StyleSheet, View din "reactive-native"; Extinderea clasei de export se poziționează Component render () return ();
Dacă știți deja cum vor fi prezentate fiecare element, este doar o chestiune de a aplica lucrurile pe care le-am învățat până acum. La urma urmei, nu avem nevoie să aplicăm poziționarea CSS pe cutiile mari, doar pe cele mici.
Prima coloană are numai cutia portocalie, aplicând astfel justifyContent: "centru" la containerul său ar trebui să facă truc. În cazul în care ați uitat deja, flexDirection implicit la coloană. Aceasta înseamnă că dacă ați setat justifyContent la centru, copiii vor fi aliniate pe centrul axei Y..
Cea de-a doua coloană are în principiu aceeași idee ca cea dintâi, dar de data aceasta nu vrem să aliniem toate cutiile la centru. Vrem ca ei să aibă spații egale între ele și justifyContent: "spațiu între" face treaba asta. Dar, în același timp, dorim să ne concentrăm pe toți copiii pe axa X, astfel încât să le folosim alignItems: 'center'.
Singura parte dificilă aici este că nu trebuie să aplicați nici unul lăţime proprietate pentru caseta gri, pentru că vrem să se întindă tot drumul pentru a consuma întreaga lățime a părintelui său. Deoarece nu am aplicat niciunul lăţime, ar trebui să aplicăm alignSelf: 'stretch' la caseta gri, astfel încât acesta să consume întreaga lățime a părintelui său.
Apoi, pentru a poziționa cutia roșie mică, ușor de poziția sa relativă, folosim poziție: relativă și apoi aplicați top și stânga deoarece poziția sa relativă este în jurul colțului superior stâng al părintelui său.
În ceea ce privește cutia portocalie mică, folosim poziția: "absolută" deoarece trebuie să o aliniem la colțul din dreapta sus al părintelui. Acest lucru funcționează deoarece elementele poziționate absolut în React Native sunt legate de părintele lor.
Cea de-a treia coloană practic aplică aceeași idee, așa că nu o voi mai explica.
const flex = 1, justifyContent: 'center', mijloc: flex: 5, justifyContent: 'space-between' , alignItems: 'center', dreapta: flex: 1, justifyContent: 'center', alignItems: 'flex-end', box: width: 100, height: 100, backgroundColor: '# 333', big_green_box : backgroundColor: 'verde', big_orange_box: backgroundColor: 'orange', big_lightblue_box: backgroundColor: '# 03A9F4', big_gray_box: height: 100, alignSelf: 'stretch', backgroundColor: '#ccc' , interior_box: lățime: 20, înălțime: 20, red_box: poziție: relativă, fundalColor: "roșu", top: 10, stânga: 10, orange_box: position: portocaliu ', top: 10, dreapta: 10, purple_box: pozitie:' absolut ', fundalColor:' purpuriu ', jos: 10, dreapta: 10, black_box: position: );
Apoi, să încercăm să implementăm o structură fixă a antetului și subsolului. Acest lucru se găsește în mod obișnuit în aplicațiile care au o navigare pe fila; filele sunt fixate în partea de jos a ecranului în timp ce conținutul principal poate fi derulat.
Pentru ca noi să realizăm acest lucru, trebuie să folosim ScrollView astfel încât, dacă conținutul principal trece peste înălțimea containerului, React Native va genera automat o bară verticală de derulare. Acest lucru ne permite să adăugăm marginTop și marginBottom la containerul principal de conținut, astfel încât antetul și subsolul fix să nu împiedice conținutul principal. De asemenea, rețineți că stânga și dreapta valorile antetului și subsolului sunt setate la 0 astfel încât acestea vor consuma lățimea totală a dispozitivului.
import React, Component de la "reacție"; importați StyleSheet, View, ScrollView de la "reactive-native"; exportul clasei implicite FixedHeaderFooter extinde Component render () return (); const stiles = StyleSheet.create (container: flex: 1, flexDirection: 'column', justifyContent: 'center', header: height: 40, position: absolute; left: 0; , top: 0, backgroundColor: '# 03A9F4', zIndex: 10, conținut: alignItems: 'center', marginTop: 50, marginBottom: 40, subsol: height: 0, dreapta: 0, fund: 0, fundalColor: '# 8BC34A', caseta: lățimea: 100, înălțimea: 100, fundalulColor: '# 333', margineaBottom: 10);
Iată cum va arăta:
Reacționează că Native are o comunitate mare în spatele ei, deci nu este de mirare că câteva biblioteci au fost deja create pentru a ușura implementarea planurilor. În această secțiune, vă prezint într-o bibliotecă numită React Native Easy Grid. Puteți să-l utilizați pentru a descrie modul în care doriți să vă stabiliți aplicația utilizând funcția Grilă, Rând, și Col componente.
Puteți să o instalați cu următoarea comandă:
npm instalează reacția-nativă-grilă ușoară - salvează
Importați biblioteca și extrageți diferitele componente ale fișierului.
import React, Component de la "reacție"; importați StyleSheet, View din "reactive-native"; import Col, Row, Grid din "reactiv-nativ-easy-grid";
Grilă componenta este utilizată pentru a împacheta totul. Col este utilizat pentru a crea o coloană și Rând este folosit pentru a crea rânduri. Puteți specifica a mărimea proprietate pentru ambele Rând și Col, deși am folosit-o doar pe Rând de mai jos. Dacă dimensiunea nu este specificată, va împărți în mod egal spațiul disponibil între Col instanțe.
În acest caz, există doar două, astfel încât întreg ecranul este împărțit în două coloane. Prima coloană este împărțită apoi în două rânduri. Aici am specificat a mărimea, dar, de fapt, puteți să o săriți dacă aveți nevoie de rânduri de dimensiuni egale, așa cum am făcut mai jos.
exportare la clasa de export FlexboxGridLibrary extinde Component render () return (); |
|
După ce sa terminat, tot ce trebuie să faceți este să adăugați stilul pentru rânduri și coloane:
stiluri const = StyleSheet.create (orange_box: backgroundColor: 'orange', green_box: backgroundColor: 'verde', gray_box: backgroundColor: 'gri');
După cum ați observat, React Native Easy Grid are un API foarte intuitiv.
În acest tutorial, ați învățat cum să stabiliți aplicațiile React Native. În mod specific, ați învățat cum să utilizați React Native's Flexbox pentru a poziționa lucrurile în jur. De asemenea, ați învățat cum să utilizați React Native Easy Grid, ceea ce ușurează implementarea Flexbox.
.
