Accentsconagua
Share
În această serie, veți învăța cum să utilizați React Native pentru a crea machete de pagini utilizate în mod obișnuit în aplicațiile mobile. Machetele pe care le veți crea nu vor fi funcționale - în schimb, atenția principală a acestei serii este să vă murdăriți mâinile în stabilirea conținutului în aplicațiile dvs. Reactive Native.
Dacă sunteți nou în a stabili aplicații Reactive Native sau stil în general, consultați tutorialul meu anterior:
Pentru a urmări împreună cu această serie, vă provoc să încercați să creați mai întâi fiecare ecran în parte, înainte de a citi instrucțiunile pas cu pas ale tutorialului. Nu veți beneficia cu adevărat de mult din acest tutorial doar dacă ați citit-o! Încercați mai întâi înainte de a căuta răspunsurile aici. Dacă reușiți să faceți ca aspectul ecranului original, comparați implementarea cu a mea. Apoi decideți pentru voi cine este unul mai bun!
În această a doua parte a seriei, veți crea următoarea pagină de calendar:
Aplicațiile Calendar sunt utilizate pentru a urmări evenimentele și numirile adăugate de utilizator. Veți găsi diferite variații în sălbăticie, dar majoritatea vor avea aceleași elemente ca calendarul fizic: luna și anul curent, zilele din lună și evenimentele sau întâlnirile adăugate de utilizator.
Iată câteva exemple de acest tip de aspect:
Primul pas, desigur, este crearea unui nou proiect React Native:
react-nativi reacționează-native-ecrane comune
Odată ce proiectul este setat, deschideți index.android.js fișier și înlocuiți codul implicit cu următoarele:
import React, Component de la "reacție"; import AppRegistry de la "reactive-native"; importați calendarul din "./src/pages/Calendar"; clasa implicită pentru export ReactNativeCommonScreens extinde Component render () return (); AppRegistry.registerComponent ("ReactNativeCommonScreens", () => ReactNativeCommonScreens);
Creeaza o src / pagini și creați un Calendar.js dosar în interiorul acestuia.
Veți avea nevoie de asemenea reacționează-native-vector-icoane pachet. Acesta este folosit în mod specific pentru pictogramele de navigare, precum și alte pictograme care vor fi necesare în pagină.
npm instalează -save react-native-vector-icons
Deschide Android / app / build.gradle fișier și adăugați o referință la pachet:
dependente // restul dependențelor sunt aici la proiectul de compilare de top (': icons react-native-vector') // add thisFaceți același lucru cu Android / settings.gradle fișier adăugând următoarele în partea de jos:
include: proiectul "reactiv-nativ-vector-icons" ("reactiv-nativ-vector-icons").Deschis Android / app / src / main / java / com / reacționează-nativ-comune ecrane / MainApplication.java și importați pachetul:
import java.util.Arrays; import java.util.List; import com.oblador.vectoricons.VectorIconsPackage; //adaugă asta
În cele din urmă, inițializați pachetul:
@Override Protected ListgetPackages () retur Arrays. asList (noul MainReactPackage (), noul VectorIconsPackage () // adăugați acest);
Bine, acum că ați încercat să codificați singur aspectul (fără cheating, nu?), Vă voi arăta cum mi-am construit implementarea.
La început, m-am gândit că acest lucru ar fi cel mai dificil de implementat, dar crede-mă, într-adevăr nu este atât de complicat atâta timp cât știi deja elementele de bază. Există câteva oportunități aici pentru a utiliza codul JavaScript pentru a vă ajuta să faceți redarea.
Începeți prin a include toate componentele și pachetele de care aveți nevoie:
import React, Component de la "reacție"; importați StyleSheet, Text, View, ScrollView de la "reactive-native"; import Icon de la "reactive-native-vector-icons / FontAwesome"; import range de la "lodash"; butonul de import din '... / components / Button';
De data aceasta există un nou pachet pe care încă nu l-ai instalat și asta e lodash. Nu veți avea nevoie de toată biblioteca lodash, ci doar de biblioteca gamă funcţie. Aceasta este utilizată pentru generarea unui număr de numere bazate pe un anumit interval. Puteți instala doar această funcție executând npm instalare - salvează pe terminalul tău.
Adăugați codul boilerplate pentru crearea paginilor:
Extinderea clasei implicite pentru export extinde Component render () return (... ); const stiles = StyleSheet.create (container: flex: 1);
Antetul are trei elemente: butonul pentru revenirea la pagina anterioară, titlul paginii curente și textul care prezintă o reprezentare prietenoasă a omului cu data selectată în prezent.
Calendar Astăzi
antet are o flexDirection de rând astfel încât fiecare header_item este stivuită orizontal. La fel contracta valoarea este atribuită fiecăruia, astfel încât aceștia consumă cantități egale de spațiu. text_center și text_right sunt utilizate pentru alinierea textului în interiorul acestora header_itemla centru și la dreapta. Acest lucru se întâmplă deoarece, în mod prestabilit, acestea sunt aliniate în partea cea mai de jos a containerului.
antet: backgroundColor: '# 329BCB', flexDirection: 'rând', umplutură: 20, header_item: flex: 1, header_button: flexDirection: 'row', text_center: textAlign: 'center' : textAlign: "dreapta", header_text: culoare: '#fff', fontSize: 20, bold_text: fontWeight: 'bold',
Odată ce stilurile au fost adăugate, acum ar trebui să arate astfel:
Următorul este calendarul real, care este împărțit în trei părți: antetul, zilele săptămânii și zilele calendaristice:
... ... ...
Antetul calendarului permite utilizatorului să schimbe anul și luna.
Există cel puțin două moduri în care acest lucru poate fi implementat. Prima metodă este de a trata fiecare element ca un singur element și de a aplica justifyContent: "spațiu între" la containerul său. A doua metodă este de a grupa toate elementele care au de a face cu anul și de a grupa cele care au de a face cu luna.
A doua metodă este cea aplicată mai jos. Din punct de vedere semantic, acest lucru are mult mai mult sens deoarece butonul pentru navigarea înapoi pe an, anul în sine și butonul pentru navigarea înainte sunt toate legate, astfel încât să le poți trata ca pe un singur lucru, punându-le în același container. Același lucru este valabil și pentru comenzile de luni.
2013 noiembrie
De acolo, puteți aplica aceeași tehnică acelor două grupe de componente din aceeași linie. Pentru a adăuga spații între cele două butoane (spate și înainte) și eticheta, utilizăm justifyContent: "spațiu între". Folosim alignItems: 'center' să îndrepte toate elementele din interiorul acestuia către centru. În cele din urmă, adăugăm umplutura din stânga și din dreapta pentru a adăuga mai mult spațiu între cele două grupuri.
calendar_header: flexDirection: 'row', calendar_header_item: flex: 1, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingTop: 20, paddingRight: 40, paddingLeft: calendar_header_text: fontWeight: "bold", fontSize: 20,
Următoarele sunt săptămânile. Utilizăm o funcție pentru a face aceste lucruri, deoarece este mai bine să folosiți un cod JavaScript pentru a reda toate elementele.
this.renderWeekDays ()
Deci, în loc de a avea șapte Vedere sau Text componente care redă în fiecare zi a săptămânii, puteți avea doar o matrice care conține zilele săptămânii. Puteți apoi repeta în acele zile folosind Array.map () funcţie. Pentru fiecare iterație, faceți a Text componentă care arată ziua.
renderWeekDays () lăsăm săptămânile = ['soare', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'); retur weekday.map ((zi) => return (Day.toUpperCase () ); );
Rețineți că în codul de mai sus, toUpperCase () funcția este folosită pentru a converti toate literele din fiecare zi la majuscule. Răspunde Nativ nu vine cu text-transformare Proprietatea CSS, deci aceasta este singura modalitate de a obține litere majuscule în afară de manual folosind șiruri de caractere mari.
Iată stilul pentru antetul calendarului:
calendar_weekdays_text: flex: 1, culoare: '# C0C0C0', textAlign: 'centru',
Zilele calendaristice utilizează, de asemenea, o funcție pentru redarea zilelor:
this.renderWeeks ()
renderWeeks () funcția utilizează gamă() funcția în lodash pentru a genera o matrice care conține zilele din ultima lună și zilele lunii curente. Aceste două matrice sunt apoi îmbinate împreună.
Cu toate acestea, nu puteți utiliza direct matricea rezultată ca sursă de date pentru zilele calendaristice. Acest lucru se întâmplă pentru că, dacă purtați simplu prin elementele de ieșire a Text pentru fiecare zi, nu va exista nicio distincție între fiecare săptămână. Știți deja că pentru a face fiecare zi calendaristică în linie, trebuie să aplicați flexDirection: "rând" la containerul său. Aplicarea acestuia într-un singur container ar avea drept consecință faptul că toate zilele calendaristice vor fi plasate într-o singură linie.
Aceasta înseamnă că trebuie să aveți un recipient separat pentru fiecare săptămână. Întrebarea este cum. Din nou, există cel puțin două modalități de a realiza acest lucru.
Prima metodă este de a avea o variabilă de stocare a numărului de zile în care sunt afișate în prezent și apoi să adăugați o declarație condiționată care va face o deschidere 0 și o închidere de fiecare dată când este 7. Odată ce este 7, resetați-l înapoi 0. Aceasta este metoda cea mai simplă.
Dar voi folosi o altă metodă aici. Sub getWeeksArray () funcția este utilizată pentru implementarea acesteia. Această funcție acceptă matricea de zile și le grupează în tablouri care conțin șapte zile fiecare. De acolo, puteți trece prin fiecare dintre aceste mese pentru a face containerul săptămânii. Apoi, pentru fiecare iterație, reluați din nou zilele din săptămână pentru a face zilele. Aceasta este ceea ce renderDays () funcționează.
renderWeeks () let trecut_month_days = interval (27, 31); lăsați this_month_days = interval (1, 30); zilele zilei = trecut_month_days.concat (ultimele luni, zilele-lună); lasă gruped_days = this.getWeeksArray (zile); întoarcere grouped_days.map ((zile săptămâni, index) => return (this.renderDays (zilele săptămânii) ); );
Iată-l getWeeksArray () funcţie:
getWeeksArray (zile) var weeks_r = []; var seven_days = []; numărul var = 0; days.forEach (zi) => count + = 1; seven_days.push (zi); if (count == 7) weeks_r.push (seven_days) count = 0; seven_days = [];); întoarcere weeks_r;
Și iată-l renderDays () funcţie:
renderDays (week_days) întoarcere week_days.map ((zi, index) => return ( ); );
Adăugați stilul pentru fiecare săptămână (zilele saptamanii) și zi (zi și day_text):
Zilele săptămânii: flexDirection: 'rând', zi: flex: 1, fundalColor: '# F5F5F5', umplutură: 17, margine: 2, day_text: textAlign: 'center', color: 'A9A9A9', fontSize : 25,
Următoarea este nota adăugată de utilizator pentru ziua selectată în prezent și data și ora selectate. Din nou, este mai bine să grupezi elemente în funcție de scopul lor, decât de modul în care sunt plasate în pagină. Desigur, toate aceste elemente sunt legate, așa că le vom plasa în interiorul aceluiași container. Dar, dintr-o privire mai atentă, veți începe să vedeți că le puteți grupa mai departe: nota reală și data selectată. Având în vedere acest lucru, iată marcajul pe care îl veți încheia cu:
Călărește bicicleta în jurul cartierului. 8:23 PM 14 JOI
Data selectată ocupă mai puțin spațiu decât nota, deci trebuie să aplicați o valoare mai mare contracta valoare pentru note. flex: 3 și flex: 1 sunt folosite în acest caz, ceea ce înseamnă că notele consumă 3/4 din spațiul disponibil și data selectată consumă 1/4. De asemenea, puteți utiliza zecimale (0,75 și 0,25) dacă asta îți dă mai multă sens. Ce este important este să alegeți un standard și să vă lipiți de el. aliniate: "flex-end" este folosit pe notes_selected_date astfel încât toți copiii săi să fie aliniați la dreapta. Acest lucru este necesar deoarece, în mod prestabilit, acestea sunt aliniate la stânga.
note: marginTop: 10, umplutura: 20, borderColor: '# F5F5F5', borderTopWidth: 1, borderBottomWidth: 1, flexDirection: 'row', backgroundColor:'FAFAFA ', note_notes: flex: fontSize: 18, note_selected_date: flex: 1, alignItems: 'flex-end', flexDirection: 'coloana', small_text: fontSize: 15, big_text: fontSize: 50, fontWeight: inline: flexDirection: 'rând',
În cele din urmă, adăugăm jurnalele, care sunt foarte asemănătoare cu cele din tutorialul anterior, așa că vă las să vă dați seama cum se realizează aspectul!
Creați o nouă intrare Joi, 14 noiembrie
Iată stilurile:
jurnaluri: flexDirection: 'row', justifyContent: 'spațiu între', alignItems: 'center', padding: 20, borderColor: '# F5F5F5', borderBottomWidth: 1, log_text: fontSize: fontSize: 18
Asta e! În acest tutorial ați creat o pagină de calendar. Am realizat un aspect frumos al calendarului pentru o aplicație și v-am arătat cum poate fi folosit codul JavaScript pentru a compensa unele dintre limitările programului Flexbox.
După cum ați văzut, am avut nevoie de o modalitate de a limita numărul de zile la rând la doar șapte zile. Flexbox nu are o modalitate de a specifica acest lucru, așa că am folosit JavaScript pentru a reconstrui seria originală de zile astfel încât să fie împărțite în grupuri care conțin șapte zile fiecare. De acolo, tot ce trebuia să facem era să înfășurăm fiecare grup în interiorul unui Vedere și apoi aplicați flexDirection: "rând" pentru a face pe fiecare dintre ei să facă în rândul lor.
Într-un tutorial viitoare, veți învăța cum să implementați aspectul utilizat în mod frecvent în paginile galeriei. Între timp, verificați câteva din celelalte tutoriale ale noastre despre React Native și Flexbox.
