Accentsconagua
Share
În această serie, î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 această a treia ediție a seriei, veți crea următoarea pagină a galeriei foto:
Galeriile sunt adesea folosite pentru a afișa o colecție de conținuturi înrudite astfel încât să fie prezentate doar informațiile necesare. De cele mai multe ori aceasta include o fotografie, un titlu și alte informații relevante.
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 Galerie din "./src/pages/Gallery"; clasa implicită pentru export ReactNativeCommonScreens extinde Component render () return (); AppRegistry.registerComponent ("ReactNativeCommonScreens", () => ReactNativeCommonScreens);
Creeaza o src / pagini și creați un Gallery.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 din subsolul paginii.
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.
Spre deosebire de cele două pagini anterioare, pagina de galerie are nevoie de câteva imagini care vor servi drept conținut principal. Puteți să accesați Google și să căutați imagini sau să descărcați imaginile din repo GitHub. Toate imaginile pe care le-am folosit sunt etichetate pentru reutilizare de către proprietarii lor, astfel încât să le puteți utiliza în mod liber dacă doriți. Odată ce aveți imaginile, salvați-le în interiorul src / imagini director. Datorită modului în care vor fi prezentate imaginile, toate acestea ar trebui să aibă dimensiuni egale.
Începeți prin crearea fișierului (src / pagini / Gallery.js) și adăugați codul de comandă:
import React, Component de la "reacție"; importați StyleSheet, View, ScrollView, Image, din "reactive-native"; import Icon de la "reactive-native-vector-icons / FontAwesome"; butonul de import din '... / components / Button'; Extinderea clasei extinse de export extinde Component ...
Această pagină are nevoie de a constructor() unde definiți căile spre imaginile pe care doriți să le utilizați. În Reacție Nativă, modul în care vă referiți la imaginile care se află în interiorul directorului dvs. de lucru este prin a le cere ca și cum ar fi un modul JavaScript. De asemenea, este important să rețineți că nu puteți avea căi de imagine generate dinamic, astfel încât trebuie să furnizați manual calea reală.
constructor (recuzită) super (recuzită); this.state = photos: [label: 'beach', src: require ('... /images/beach.jpg'), label: 'bridge', src: require ('... /images/bridge.jpg '), eticheta:' munți ', src: necesită (' ... /images/mountains.jpg '), eticheta: "floarea soarelui", src: cere ('... /images/sunflower.jpg'), label: 'sunset', src: require ('... /images/sunset.jpg' ("... /images/lake.jpg"), label: 'nature', src: require ('... /images/nature.jpg') : cer ('... /images/pink.jpg'), eticheta: 'rails', src: require ('... /images/rails.jpg'),]; Nu este nevoie să le definiți în stare, deoarece valorile nu se vor schimba. Puteți să le definiți într-un fișier separat, să le importați, să le atribuiți unei variabile și apoi să le utilizați direct. Dar de dragul simplității, am decis să pun totul în stat.
În interiorul face() metodă, vei sparge tendința de a înfășura totul în interior ScrollView datorită faptului că componenta filei din partea inferioară a ecranului trebuie să aibă o poziție fixă. Aceasta înseamnă că, chiar dacă fotografiile depășesc înălțimea disponibilă, filele ar trebui să rămână pe poziție. Pentru a realiza acest lucru, folosiți a Vedere componentă pentru a împacheta totul și numai înfășurați colecția de fotografii într - o ScrollView. Acest lucru vă permite să aplicați defilarea numai la containerul colecției de fotografii:
render () return (this.renderGallery () );
Acum puteți începe să vedeți un model aici. De fiecare dată când trebuie să utilizați codul JavaScript în interiorul face() trebuie să creați o funcție separată pentru a ține acel cod, în loc să îl puneți direct în interiorul face() funcţie. Acest lucru îl păstrează și este curat.
Acum să trecem la stil. Deși a ScrollView nu este folosit pentru a împacheta totul de data aceasta, este important să rețineți că încă mai trebuie să aprovizionare flex: 1 la containerul principal pentru a consuma întregul spațiu disponibil.
(flex: 1, flexDirection: 'coloana', galerie: flexDirection: coloana, tabs: flex: 1, pictograma: textAlign: 'centru',
renderGallery () funcția este foarte asemănătoare cu renderWeeks () funcția pe care am folosit-o în tutorialul anterior, pe care l-am folosit pentru a face o pagină de calendar. Dacă doriți o actualizare a modului în care funcționează, continuați și citiți tutorialul anterior pe paginile de calendar. Ceea ce trebuie să știți este asta resizeMode se aplică la Imagine. În acest caz, este setat la acoperi, ceea ce face ca imaginea să ocupe întregul spațiu disponibil al containerului său, menținând în același timp raportul de aspect. Rezultatul este ca imaginea să fie uimită pentru dispozitivele cu ecrane mai mari dacă imaginea originală este mai mică.
renderGallery () var număr = 0; var previous_item = "; var pairs = this.getPairsArray (this.state.photos); return pairs.map ((element, index) => return (); );
Iată-l getPairsArray () funcţie:
getPairsArray (fotografii) var pairs_r = []; var perechi = []; numărul var = 0; photos.forEach ((item) => count + = 1; pairs.push (item); if (count == 2) pairs_r.push (perechi) count = 0; pairs = []; returnează perechile_r;
În cele din urmă, aici este stilul pentru fiecare rând (articol) și fotografie (fotografie). Notați utilizarea flex: 1 pe fotografia actuală. Acest lucru se datorează faptului că Imagine componenta în sine este containerul propriu. Doriți ca containerul însuși să ocupe jumătate din spațiul disponibil pentru fiecare rând - de aceea a contracta proprietate ar trebui să fie atribuite. Dacă acest lucru nu este realizat, vor fi consumate numai dimensiunile necesare fotografiei și resizeMode pe care ați adăugat-o mai devreme, nu va avea nici măcar un efect.
element: flex: 1, flexDirection: 'rând',, fotografie: flex: 1
Asta e! În acest tutorial ați învățat cum să implementați aspectul unei pagini de galerie. Ne-am concentrat asupra modului de a face față imaginilor atunci când vine vorba de stabilirea aplicațiilor dvs. Reactive Native. Adesea trebuie să utilizați o combinație de contracta și resizeMode pentru a face fluxul imaginilor așa cum doriți. Cum a comparat soluția mea cu cea proprie? Anunțați-ne în forumul de discuții de mai jos.
Într-un tutorial viitoare, veți afla cum să implementați aspectul utilizat în mod frecvent în aplicațiile de știri. Între timp, verificați câteva din celelalte tutoriale ale noastre despre React Native și Flexbox!
