Accentsconagua
Share
Bine ați venit în această serie, în care învățați cum să utilizați React Native pentru a crea machete de pagini utilizate în mod obișnuit în aplicațiile mobile. Modelele pe care le creați nu vor fi funcționale - în schimb, principalul obiectiv al acestei serii este de a vă împiedica mâinile în a pune conținut î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 acest tutorial final al seriei, veți crea următoarea pagină de fluxuri de știri:
Actualizările feedurilor de știri sunt folosite pentru a prezenta informații astfel încât să poată fi ușor scanate. De cele mai multe ori este prezentat într-un format de listă cu titlul, fragmentul și opțional o imagine de previzualizare care reprezintă fiecare element de știri.
Iată câteva exemple de acest tip de aspect utilizat în sălbăticie:
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"; import Știri din "./src/pages/News"; clasa implicită pentru export ReactNativeCommonScreens extinde Component render () return (); AppRegistry.registerComponent ("ReactNativeCommonScreens", () => ReactNativeCommonScreens);
Creeaza o src / pagini și creați un News.js dosar în interiorul acestuia.
Veți avea nevoie de asemenea reacționează-native-vector-icoane pachet. Acesta este folosit în mod specific pentru pictograma din spate în antet.
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 aspectul dvs. (fără cheating, nu?) Vă voi arăta cum mi-am construit implementarea.
Probabil că ați observat tendința până acum. Am aranjat aceste lucruri în funcție de dificultate - sau cel puțin în funcție de ceea ce am găsit dificil! Deci, acest ecran final este, în principiu, șeful mare dintre celelalte ecrane pe care le-ați creat până acum. Nu te mira, totuși, pentru că te voi conduce pas cu pas.
Veți avea nevoie de câteva imagini pentru imaginea de previzualizare a fiecărui element de știri. Am adăugat câteva imagini în repo pe care le puteți utiliza dacă doriți.
Începeți prin adăugarea codului de boilerplate:
import React, Component de la "reacție"; importați StyleSheet, Text, Vizualizare, ScrollView, Imagine de la "reactiv-nativ"; import Icon de la "reactive-native-vector-icons / FontAwesome"; butonul de import din '... / components / Button'; Import NewsItem din '... / components / NewsItem';
De data aceasta există o nouă componentă numită NewsItem (src / componentelor / NewsItem). După cum sugerează și numele, este folosit pentru redarea fiecărui element de știri. Vom reveni la aceasta mai târziu, dar mai întâi aruncăm o privire la ea constructor() funcţie. La fel ca ecranul galeriei mai devreme, aceasta folosește statul pentru a stoca sursa de date pentru elementele de știri. Titlurile și rezumatele provin din New York Times, dar imaginile provin din Google Images (și sunt etichetate pentru reutilizare de către proprietarii lor).
constructor (recuzită) super (recuzită); this article: pretext: 'Grey Matter', titlu: 'Art Makes You Smart', rezumat: 'Vizitele muzeului măresc scorurile testului, generează responsabilitate socială și mărește aprecierea artelor studenților' (...), pretext: ", titlu:" Tensiunea și erorile înaintea pericolului ", rezumat:" Interviurile și documentele oferă detalii noi despre modul în care lansarea președintelui Obama \ ", pretext:", titlu: "36 de ore în Charleston, SC", rezumat: "Mulțimile sunt mai subțiri și temperaturile sunt ușoare în timpul iernii în acest ... ", imagine: require ('... /images/rails.jpg'),]; Conținutul este împărțit în trei părți: antetul, textul instrucțiunii și știrile. Antetul este foarte similar cu antetul din ecranul calendar anterior; singura diferență este că, în loc de trei, există doar două elemente vizibile. (Dacă doriți o reîmprospătare a modului în care a fost făcut ecranul calendarului, continuați și citiți acest tutorial.)
Eu spun "vizibil" pentru că există de fapt trei elemente - ultimul este doar ascuns! Acest lucru permite centrarea ușoară a textului în mijloc. Dacă aveți doar două elemente în antet, este dificil să vă dați seama cum să împărțiți spațiul dintre cele două elemente și să aveți în continuare mijlocul care apar centrat. Dar dacă aveți trei elemente, fiecare poate avea același lucru contracta valoare, și puteți folosi doar aliniere text pentru a poziționa textul sau alignItems a pozitiona Vedere componente.
render () return (); Cele mai multe e-mailuri SWIPE ACȚIUNI SECȚIUNI this.renderNews ()
renderNews () funcția este cea care buclează prin toate știrile din stare și le face să utilizeze NewsItem component.
renderNews () retur acest.state.news_items.map ((news, index) => return);
Următorul este codul pentru NewsItem componentă. Începeți prin adăugarea codului componentei React de la boilerplate. După cum ați văzut mai devreme, această componentă acceptă cheie, index, și știri ca elemente de recuzită. Chiar ai nevoie de ea index și știri. cheie este doar modul React Native de identificare unică a fiecărui rând dintr-o listă. Trebuie să o furnizați de fiecare dată când utilizați Array.map pentru redare; altfel, se va plânge.
Când utilizați componente funcționale, recuzele sunt transmise ca un singur argument. Mai jos, recuzile individuale sunt extrase folosind atribuirea de distrugere, deci news, index practic extrage știri și index proprietăți din recuzită. De acolo puteți obține numărul care urmează să fie redat.
import React, Component de la "reacție"; importați StyleSheet, Text, Vizualizare, Imagine de la "reactiv-nativ"; butonul de import din "./Button"; const NewsItem = (news, index) => da numărul = (index + 1) .toString (); întoarcere (… );
Dacă vă uitați la captura de ecran de mai devreme, puteți vedea că fiecare articol de știri poate fi împărțit în două grupuri: unul care afișează textul de știri (numărul, titlul și fragmentul) și unul care afișează imaginea de caracteristică.
Asta rezolvă problema cu imaginea de caracteristică, deoarece este doar un element. Dar pentru textul de știri, trebuie să-l împărțiți mai departe. Așa cum ați observat, numărul este în aceeași poziție, chiar dacă titlul are un pretext (de ex. "Grey Matter"). Pretextul are de asemenea un stil diferit de titlu și număr.
Folosind aceste cunoștințe, puteți deduce că numărul, pretextul și titlul nu trebuie să fie împachetate împreună într-un singur recipient. În plus, pretextul, titlul și fragmentul arată ca și cum ar fi stivuite vertical, astfel încât să le puteți pune în interiorul unui singur container. Numai numărul ar trebui să fie scos. Cu asta veți ajunge cu următorul marcaj:
getPretext () vă permite să faceți în mod condiționat un Text componentă numai atunci când un articol de știri are un pretext în el.
funcția getPretext (news) if (news.pretext) return (News.pretext );
Iată-l onPress funcţie. Tot ce face este alertarea titlul de știri, dar într-o aplicație reală acest lucru ar trebui să navigați la articolul actual:
funcția onPress (știri) alert (news.title);
În acest moment, pagina va arăta astfel:
Acum, adăugați următoarele stiluri la pagina Știri:
const stiles = StyleSheet.create (container: flex: 1, antet: flexDirection: 'row', backgroundColor: '#FFF', padding: 20, justifyContent: 'space-between', borderBottomColor: '# E1E1E1' , borderBottomWidth: 1, header_button: flex: 1,, spațiu liber: flex: 1, back_button: flexDirection: 'row', alignItems: 'center', back_button_label: color: '# 397CA9', fontSize : 20, instrucțiuni: alignSelf: 'center', marginTop: 5, instruction_text: culoare: '# A3A3A3', header_text: flex: 1, alignSelf: 'center', header_text_label: fontSize: 20 , textAlign: 'centru', news_container: flex: 1, flexDirection: 'coloana',);
Nu voi mai trece prin ceea ce face fiecare linie de cod, deoarece practic aplică aceleași concepte pe care le-ați învățat în tutorialele anterioare din această serie. Iată ce va arăta pagina după aplicarea stilurilor de mai sus:
Apoi, adăugați stilurile pentru fiecare element de știri. Fiecare news_item are o flexDirection de rând astfel încât textul de știri și imaginea recomandată să fie pe o singură linie. news_text ocupă două treimi din spațiul disponibil, în timp ce news_photo ocupă spațiul rămas.
const stiles = StyleSheet.create (news_item: flex: 1, flexDirection: 'rând', paddingRight: 20, paddingLeft: 20, paddingTop: 30, paddingBottom: 30, borderBottomWidth: 1, borderBottomColor: '# E4E4E4', news_text : flex: 2, flexDirection: "rând", umplutură: 10,);
Apoi, trebuie să adăugați stilul pentru a remedia problema, textul se suprapune cu imaginea de previzualizare. Puteți face acest lucru prin alocarea a contracta valoare pentru copiii din news_text. A contracta valoarea a fost deja atribuită news_text, dar din moment ce a Vedere a fost folosit în interiorul acestuia, trebuie să alocați și contracta pentru cei care nu vor trece peste limitele părintelui lor Vedere.
Vom da o valoare flexibila 0.5 la număr, in timp ce TEXT_CONTAINER va avea o valoare de 3. Cu aceste valori, TEXT_CONTAINER va ocupa de șase ori mai mult spațiu ca număr.
număr: flex: 0.5,, text_container: flex: 3,
Acum tot ce trebuie să faceți este să adăugați atingerile finale pentru stilul textului:
pretext: culoare: '# 3F3F3F', fontSize: 20, titlu: fontSize: 28, fontWeight: bold, culoare: '# 000', fontFamily: georgia, news_photo: flex: 1, justifyContent : 'center', alignItems: 'center', fotografie: width: 120, height: 120
Și nu uitați să exportați componenta!
export default NewsItem;
Asta e! În această parte finală a acestei serii, ați învățat cum să implementați aspectul utilizat în paginile de știri. Acest tutorial a reunit toate lucrurile pe care le-ați învățat în părțile anterioare ale seriei. Ați folosit ambele flexDirection: "rând" și flexDirection: "coloana" pentru a finaliza stilurile pentru fiecare element de știri. De asemenea, ați folosit cunoștințele în alinierea imaginilor pentru imaginea de previzualizare.
Dacă ați încercat să implementați aceste machete pe cont propriu, ați eșuat și apoi ați încercat din nou, ar trebui să aveți deja suficientă abilitate pentru a implementa orice tip de aspect. Puteți aplica lucrurile pe care le-ați învățat aici pentru a implementa chiar și aspectele complexe pe care le vedeți frecvent în aplicațiile populare. Dacă doriți mai multă practică, încercați să recreați machetele pe care le vedeți în aplicațiile populare, cum ar fi Facebook sau YouTube.
Cum a comparat soluția mea cu cea proprie? Anunțați-ne în forumul de discuții de mai jos. Între timp, verificați câteva dintre celelalte tutoriale ale noastre despre React Native și Flexbox.
