Share
Expo este o colecție de instrumente care facilitează codarea aplicațiilor React Native. În acest tutorial, vă voi arăta cum puteți crea rapid aplicații Reactive Native folosind Expo.
Cu Expo, dezvoltatorii pot crea aplicații Reactive Native fără toate frustrările care vin cu instalarea și configurarea dependențelor de software cum ar fi Android Studio, Xcode sau toate celelalte instrumente necesare dezvoltării și executării unei aplicații Reactive Native.
În acest tutorial, vă voi arăta cum să creați un simplu joc de memorie folosind Expo. Pe parcurs, veți învăța și următoarele:
Expo este un cadru pentru dezvoltarea rapidă a aplicațiilor Reactive Native. Este ca Laravel sau Symphony pentru dezvoltatorii PHP, sau Ruby on Rails pentru dezvoltatorii Ruby. Expo oferă un strat pe partea de sus a API-urilor Native React pentru a le ușura utilizarea și gestionarea. De asemenea, oferă instrumentele care facilitează bootstrapul și testarea aplicațiilor React Native. În cele din urmă, acesta furnizează componente și servicii UI care sunt de obicei disponibile numai atunci când instalați o componentă React Nativă terță parte. Toate acestea sunt disponibile prin kitul SDK Expo.
Înainte de a continua, este important să fiți conștienți de unele dintre limitele expoziției:
Chiar și cu aceste limitări, este important să rețineți că Expo este un cadru complet funcțional, cu o mulțime de suport pentru API-urile Android sau iOS utilizate în mod obișnuit. Aceasta înseamnă că te-a acoperit pentru majoritatea funcționalităților pe care aplicațiile de obicei au nevoie. Deci, de multe ori nu este nevoie să priviți în afara Expo pentru a implementa funcționalitatea nativă.
Aplicația pe care o vom crea este un joc de memorie. S-ar putea să fiți familiarizați cu acest tip de joc - utilizatorul trebuie să găsească perechi potrivite, transformând cărțile câte două pe rând. Iată cum arată ecranul prestabilit:
Iată cum se pare că odată ce toate perechile au fost deschise:
Odată ce au rezolvat jocul, utilizatorul poate apăsa pe restabili pentru a reseta elementele la starea inițială. Acest lucru le permite să înceapă jocul din nou.
Spre deosebire de React Native simplu, unde trebuie să instalați și să configurați Android Studio sau Xcode și alte dependențe, cu Expo există doar câțiva pași pe care să îi urmați pentru a începe să dezvoltați aplicații:
npm instalați exp --global
Odată ce ați instalat toate dependențele, puteți genera acum o nouă aplicație Expo:
Explicați MemoryGame
Odată ce sa terminat, va crea un nou dosar numit Joc de memorie. Navigați în interiorul acestuia și începeți să rulați serverul de dezvoltare:
cd MemoryGame exp start
Alternativ, puteți utiliza și Expo XDE. Acest lucru vă permite să creați și să executați aplicații Expo printr-o interfață grafică. Puteți descărca programul de instalare din repo-ul Expo GitHub. În prezent, suportă doar Windows și Mac. Deci, dacă sunteți pe Ubuntu sau Linux, este mai bine să rămâneți cu linia de comandă de acum.
Odată ce serverul de dezvoltare se execută, acum ar trebui să puteți vedea ceva de genul:
Acesta este codul QR care indică previzualizarea live a proiectului. Deschideți aplicația Expo client de pe telefonul dvs. și scanați codul utilizând scanerul QR. În acest moment, ar trebui să puteți vedea acum ecranul implicit. De fiecare dată când lovesti Control-S pe oricare dintre fișierele de proiect, previzualizarea ar trebui reîncărcată automat pentru a reflecta modificările.
Puteți găsi codul sursă complet al proiectului pe repo GitHub. Sau dacă doriți să încercați aplicația, puteți verifica demo-ul. Doar selectați QR Code și scanați-l pe telefon utilizând aplicația Expo client.
Acum suntem gata să codificăm aplicația. Să începem cu unele componente ale UI înainte de a ne întoarce și a implementa componenta principală.
Antetul este utilizat pentru a afișa titlul aplicației. Creeaza o componente pliant. În interiorul lui, creați un Header.js fișier și adăugați următoarele:
import Reacționează de la "reacționează"; importați StyleSheet, Text, View de la "reactive-native"; Extindere clasa implicită pentru export extinde React.Component render () return (); const stiles = StyleSheet.create (header: flex: 1, flexDirection: 'coloana', alignSelf: 'stretch', paddingTop: 20, paddingBottom: 5, backgroundColor: '# f3f3f3' header_text: fontWeight: "îndrăzneț", fontSize: 17, textAlign: 'centru'); Joc de memorie
Aceasta este doar o componentă de bază Reactivă Nativă, cu un stil care să corespundă interfeței cu aplicația noastră.
Următorul este componenta pentru afișarea scorului (componente / Score.js):
import Reacționează de la "reacționează"; importați StyleSheet, Text, View de la "reactive-native"; clasa implicită la export scorul se extinde la React.Component render () return (); const stiles = StyleSheet.create (score_container: flex: 1, alignItems: 'center', padding: 10, scor: fontSize: 40, fontWeight: 'bold'); This.props.score
Din nou, doar o componentă simplă de afișare, cu vizualizare text și un stil de bază.
Componenta cardului (componente / Card.js) va afișa cardurile. Aceste carduri utilizează pictograme din setul de pictograme pentru vectori Expo. Aceasta este una dintre caracteristicile care ies chiar din cutie când folosiți Expo: include icoane din seturi de pictograme precum FontAwesome, Entypo și Ionicons.
În codul de mai jos, puteți vedea că folosim doar FontAwesome. Are pictograma dorită pentru afișarea stării implicite a cardului: un semn de întrebare. După cum veți vedea mai târziu în componenta principală a aplicației, vom folosi și icoanele de la Entypo și Ionicon. Trimiterea la aceste surse de icoane va fi transmisă acestei componente, deci nu este nevoie să le specificați aici:
import Reacționează de la "reacționează"; importați StyleSheet, Text, View, TouchableHighlight de la "reactive-native"; import FontAwesome din '@ expo / vector-icons'; // utilizați FontAwesome din iconițele vectorului expo
În interiorul face() , utilizăm doar sursa și pictograma care este trecută ca elemente de recuzită dacă cardul este deschis. În mod implicit, va afișa doar pictograma de marcaj de întrebări din FontAwesome. Dar dacă cardul este deschis, va folosi sursa, pictograma și culoarea pictogramei care au fost transferate ca elemente de recuzită.
Fiecare dintre cărți poate fi accesată. Când este selectată, clickCard () funcția va fi executată, care este, de asemenea, trecută prin recuzită. Mai târziu, veți vedea ce face funcția, dar pentru moment, știți doar că actualizează starea pentru a dezvălui pictograma de pe card:
Extinderea clasei extinse Card extinde React.Component render () let CardSource = FontAwesome; // setați FontAwesome ca sursă de pictograma implicită let icon_name = 'cerc de întrebare'; lăsați icon_color = '# 393939'; dacă (this.props.is_open) CardSource = this.props.src; icon_name = this.props.name; icon_color = this.props.color; întoarcere ();
Nu uitați să adăugați stilurile:
const stiles = StyleSheet.create (carte: flex: 1, alignItems: 'center', card_text: fontSize: 50, fontWeight: 'bold');
De asemenea, vom folosi o funcție de ajutor numită amesteca(). Acest lucru ne permite să sortăm matricea de carduri în ordine aleatorie, astfel încât ordinea lor să fie diferită de fiecare dată când jocul este resetat:
Array.prototype.shuffle = funcția () var i = această lungime, j, temp; dacă (i == 0) returnați acest lucru; în timp ce (- i) j = Math.floor (Math.random () * (i + 1)); temp = aceasta [i]; acest [i] = acest [j]; acest [j] = temp; returnați acest lucru;
Componenta principală (App.js) conține logica principală a aplicației și aduce totul împreună. Începeți prin includerea pachetelor React și Expo pe care le vom folosi. De data aceasta folosim toate sursele de pictograme din pictogramele vectori Expo:
import Reacționează de la "reacționează"; importați StyleSheet, View, Button de la "reactive-native"; import Ionicons, FontAwesome, Entypo din '@ expo / vector-icons';
Apoi, includeți componentele și ajutorul pe care l-am creat mai devreme:
importați antetul de la "./components/Header"; scorul de import de la "./components/Score"; carte de import de la "./components/Card"; importa ajutoare din "./helpers";
În interiorul constructorului, vom crea mai întâi matricea care reprezintă cartelele unice. src este sursa de pictograme, Nume este numele pictogramei (puteți găsi numele pe GitHub dacă doriți să utilizați alte pictograme) și culoare este, firește, culoarea icoanei:
Extinderea clasei extinse App extinde React.Component constructor (recuzită) super (recuzită); // obligați funcțiile la clasa this.renderCards = this.renderCards.bind (this); this.resetCards = this.resetCards.bind (aceasta); // surse de icoane let sources = 'fontawesome': FontAwesome, 'entypo': Entypo, 'ionicons': Ionicons; // Icoanele unice care urmează să fie utilizate permit carduri = src: 'fontawesome', nume: 'inima', culoare: 'roșu', src: 'entypo', nume: 'feather', culoare: '# 7d4b12 'src:' entypo ', nume:' flori ', culoare:' # 37b24d ', src:' entypo ', src: 'src:' entypo ', nume:' youtube ', culoare:' # FF0000 ', src:' entypo ', nume: "src:" fontawesome ", nume: 'skype', culoare: '# 1686D9', culoarea: '# 5f5f5f', src: 'ionicons', numele: 'ios-magnet', culoarea: '# d61c1c', src: , numele: "logo-facebook", culoarea: "# 3C5B9B"]; // next: adăugați codul creând clona și setând cardurile în stare
Rețineți că, în loc să specificați direct src la fel de FontAwesome, Entypo sau Ionicons pentru fiecare dintre obiecte, folosim denumirile de proprietăți utilizate în surse obiect. Acest lucru se datorează faptului că va trebui să creați o copie a gamei de carduri pentru ca fiecare carte să aibă o pereche. Crearea unei copii folosind metode de array, cum ar fi felie() va crea o copie a matricei, dar problema este că odată ce obiectele individuale sunt modificate fie în copie, fie în original, ambele tablouri sunt, de asemenea, modificate.
Acest lucru ne aduce la soluția de mai jos care este de a crea un obiect complet nou prin conversia carduri array într-un șir și apoi parsarea acestuia pentru ao converti înapoi într-o matrice. Acesta este motivul pentru care folosim șiruri de caractere, deoarece funcțiile nu pot fi convertite în șiruri de caractere. Am combinat apoi cele două pentru a veni cu matricea, care conține toate cărțile de care avem nevoie:
clone = JSON.parse (JSON.stringify (carduri)); // creați o matrice complet nouă din matricea cardurilor this.cards = cards.concat (clona); // combinați originalul și clona
Apoi, treceți prin matricea respectivă și generați un cod unic pentru fiecare, setați sursa de pictograme și apoi setați-o la starea închisă în mod prestabilit:
// adăugați ID-ul, sursa și setați starea implicită pentru fiecare card this.cards.map ((obj) => permite id = Math.random () .toString (36) .substring (7); ; obj.src = surse [obj.src]; obj.is_open = false;);
Sortați cartelele aleatoriu și setați starea implicită:
this.cards = acest.cards.shuffle (); // sortați cartelele aleatoriu // setați starea implicită this.state = current_selection: [], // această matrice va conține o serie de obiecte de carte care sunt selectate în mod curent de către utilizator. Aceasta va conține numai două obiecte simultan. selected_pairs: [], // numele pictogramelor. Această matrice este folosită pentru a le exclude din scorul de selecție suplimentar: 0, // carduri implicite pentru scorurile de utilizator: this.cards // cartelele amestecate
face() metoda face antetul, cărțile, scorul și butonul pentru resetarea jocului curent. Foloseste renderRows () pentru a face rândurile individuale ale cardurilor. Ecranul va avea șase rânduri care conțin patru cărți fiecare:
render () return (); this.renderRows.call (this)
Iată codul pentru renderRows () funcţie. Aceasta utilizează getRowContents () funcția, care este responsabil pentru crearea unei matrice de matrice cu câte patru elemente fiecare. Aceasta ne permite să redăm fiecare rând și apoi să folosim o altă funcție pentru redarea cardurilor pentru fiecare iterație a Hartă() funcţie:
renderRows () lasă conținutul = this.getRowContents (this.state.cards); retur contentss.map ((carduri, index) => return (this.renderCard (cărți) ); );
Iată-l getRowContents () funcţie:
getRowContents (cartele) let contents_r = []; permiteți conținutului = []; să numărăm = 0; cards.forEach ((item) => count + = 1; contents.push (item); if (count == 4) contents_r.push (conținut) count = 0; content = []; returnează content_r;
Înainte este renderCards () funcţie. Aceasta acceptă matricea de obiecte de carduri și le face prin Card componentă. Tot ce trebuie să facem aici este să trecem proprietățile individuale ale fiecărui obiect de cartelă ca elemente de recuzită. Acesta este apoi folosit pentru a face pictograma corectă, după cum ați văzut în codul pentru Card componentă. clickCard () funcția este, de asemenea, trecut ca o propunere. ID-ul cardului este transmis acelei funcții, astfel încât cardul unic poate fi identificat și actualizat:
renderCards (carduri) return cards.map ((card, index) => return (); );
În interiorul clickCard () , vom obține detaliile cardului selectat și vom verifica dacă acesta ar trebui prelucrat în continuare:
clickCard (id) lăsați select_pairs = this.state.selected_pairs; let current_selection = this.state.current_selection; lasa scorul = this.state.score; // a obține indexul cartelei selectate curent index index = this.state.cards.findIndex ((card) => return card.id == id;); lasa carti = this.state.cards; // cardul nu ar trebui să fie deja deschis și nu se află pe o serie de carduri a căror perechi sunt deja selectate dacă (carduri [index] .is_open == false && select_pairs.indexOf (carduri [index] .name) === - 1) // următorul: adăugați codul pentru procesarea cardului selectat
Acum, completați codul pentru manipularea unui card selectat.
În primul rând, deschidem cardul și îl adăugăm la o serie de carduri selectate în prezent:
carduri [index] .is_open = true; actual_selection.push (index: index, nume: carduri [index]. nume); // next: adăugați codul pentru a determina dacă utilizatorul a selectat sau nu perechea corectă
Odată ce există două elemente în matricea cardurilor selectate în prezent, verificăm dacă numele pictogramelor sunt aceleași. Dacă acestea sunt atunci înseamnă că utilizatorul a selectat perechea corectă. Dacă nu sunt aceleași, atunci este o pereche incorectă. În acest caz, închidem prima carte selectată și apoi adăugăm un pic de întârziere înainte de a închide a doua carte. (Astfel, utilizatorul poate vedea pictograma cardului înainte de a reveni la starea închisă.)
dacă (actual_selection.length == 2) if (selecție_curență [0] .name ==selecție curentă [1]. nume) scor + = 1; // incrementarea scorului select_pairs.push (carduri [index] .name); altceva cards [current_selection [0] .index] .is_open = false; // închideți primul // întârziere închiderea cardului selectat curent cu o jumătate de secundă. setTimeout (() => cartele [index] .is_open = false; this.setState (cartele:; 500); current_selection = []; // următorul: adăugați codul pentru actualizarea stării
Ultimul lucru pe care trebuie să-l facem în modulul handler pentru evenimentul clic este de a actualiza starea pentru a reflecta modificările din interfața de utilizare:
this.setState (scor: scor, cărți: cărți, selecție_curență: selectare curentă);
O funcție conexă este dispozitivul de resetare a evenimentului. Cand restabili butonul este apăsat, pur și simplu restabilim starea implicită închizând toate cărțile și amestecând.
resetCards () // închide toate cardurile permite cărți = this.cards.map ((obj) => obj.is_open = false; return obj;); carduri = cards.shuffle (); // re-amestecați cărțile // actualizați la starea implicită this.setState (current_selection: [], select_pairs: [], cărți: cărți, scor: 0);
În cele din urmă, vom adăuga câteva stiluri de bază pentru ca aplicația noastră să arate bine.
(flex: 1, flexDirection: "rând"), corp: flex: 18, const, justifyContent: "spațiu între", umplutură: 10, margineTop: 20);
De vreme ce serverul dvs. de dezvoltare Expo funcționează tot timpul, fiecare schimbare ar trebui să fie împinsă pe dispozitivul dvs. mobil cu reîncărcare live. Încercați aplicația și asigurați-vă că funcționează așa cum trebuia.
Asta e! În acest tutorial, ați învățat cum să utilizați Expo XDE pentru a efectua rapid o aplicație React Nativă. Expo este o modalitate foarte bună de a începe să dezvolți aplicații Reactive Native, deoarece elimină necesitatea de a instala o mulțime de software care este adesea o cauză a frustrării, mai ales pentru începători. De asemenea, oferă instrumente care fac foarte ușor să previzualizeze aplicația în timp ce este dezvoltată. Asigurați-vă că verificați resursele menționate pe site-ul Expo dacă doriți să aflați mai multe.
Între timp, aruncăm o privire la unele dintre celelalte postări despre dezvoltarea aplicațiilor Reactive Native!
Accentsconagua