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ă primă parte a seriei, veți crea următoarea pagină de conectare:
Pagina de conectare este frecvent utilizată ca pagină inițială pentru aplicațiile care necesită un cont pentru utilizatori.
Iată câteva exemple de acest tip de aspect î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 Login din './src/pages/Login'; clasa implicită pentru export ReactNativeCommonScreens extinde Component render () return (); AppRegistry.registerComponent ("ReactNativeCommonScreens", () => ReactNativeCommonScreens);
Creeaza o src / pagini și creați un Login.js dosar în interiorul acestuia.
Veți avea nevoie de asemenea reacționează-native-vector-icoane pachet. Acesta este folosit în mod special pentru a face pictograma Facebook pentru butonul de conectare Facebook.
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. Deschide src / pagini / Login.js fișier și importați lucrurile de care veți avea nevoie:
import React, Component de la "reacție"; importați StyleSheet, Text, View, TextInput, ScrollView de la "reactive-native"; import Icon de la "reactive-native-vector-icons / FontAwesome";
Pe lângă componentele implicite React și reacționează-native-vector-icoane pachet, va trebui să includeți și trei componente personalizate:
import container din "... / componente / container"; butonul de import din '... / components / Button'; Eticheta de import de la "... / components / Label";
Primul este recipient (src / componente / Container.js), a cărui sarcină este de a adăuga o marjă de jos pentru ceea ce împachetează. Suna trivial, și da, puteți folosi de fapt Vedere și adăugați aceleași stiluri de fiecare dată când doriți să o utilizați. Avantajul pe care îl oferă este că nu trebuie să aplicați aceleași stiluri unui a Vedere de mai multe ori, și vă permite de asemenea să reutilizați componenta de fiecare dată când aveți nevoie pentru a adăuga o margine inferioară la ceva.
import React, Component de la "reacție"; importați StyleSheet, View din "reactive-native"; const Container = (recuzită) => return (props.children ); const stiles = StyleSheet.create (labelContainer: marginBottom: 20); default export container;
Buton componentă (src / componente / Button.js), după cum sugerează și numele, este folosit pentru a crea butoane. Dacă este prezent, acest lucru scutește orice componentă a copilului care este adăugată în interiorul acestuia. În caz contrar, rezultă a Text componentă care afișează textul din interiorul butonului. Se adaugă și un stil implicit, dar nu va fi utilizat dacă noDefaultStyles este prezent în recuzită. Stilurile unice ale butoanelor trecute de la popi sunt de asemenea opționale.
import React, Component de la "reacție"; importați StyleSheet, Text, TouchableHighlight de la "reactiv-nativ"; const Button = (recuzită) => funcția getContent () if (props.children) return props.children; întoarcereProps.label întoarcere (getContent () ); const stiles = StyleSheet.create (buton: alignItems: 'center', justifyContent: 'center', padding: 20,); buton prestabilit la export;
În cele din urmă, există Eticheta componentă (src / componente / Label.js), care este de fapt doar o Text componenta cu un anumit stil predefinit.
import React, Component de la "reacție"; importați StyleSheet, Text, de la "reactiv-nativ"; const Label = (recuzită) => return (Props.text ); const stiles = StyleSheet.create (textLabel: fontSize: 20, fontWeight: "bold", fontFamily: 'Verdana', margineaBottom: 10, culoare: '# 595856'); export default Label;
Acum puteți trece la pagina de autentificare reală. În interiorul face() metoda, înfășurați totul într-o ScrollView componentă. Acest lucru este foarte important dacă doriți ca aplicația dvs. să fie capabilă să răspundă la tot felul de dimensiuni ale dispozitivului și orientări ale ecranului.
De cele mai multe ori, indiferent cât de mică înălțime credeți că conținutul dvs. va consuma, va exista întotdeauna un dispozitiv care nu va putea să-l afișeze complet. Astfel, este nevoie de bare de defilare pentru derularea conținutului.
export default class Login se extinde Component render () return (... );
Apoi, inițializați stilurile:
const stiles = StyleSheet.create ();
Aplicați următoarele stiluri la ScrollView. flexDirection este opțională, dar este o practică bună să o definiți în mod explicit, astfel încât dezvoltatorii viitori să știe exact cum este prezentat conținutul principal al aplicației, doar dacă vă uitați la cod.
derulați: backgroundColor: '# E1D7D8', umplutura: 30, flexDirection: 'coloana',
Privind la captura de ecran de la mai devreme, prima piesă de conținut pe care doriți să o adăugați este cea de la vârf, și anume butonul de parolă uitat. Rețineți că onPress props este furnizat pentru că underlayColor nu va fi aplicată dacă nu este furnizată nici o funcție atunci când butonul este apăsat.
Stilurile utilizate pentru aceasta sunt destul de explicative, cu excepția alignSelf: "flex-end". Acest lucru spune React Native pentru a poziționa elementul la capătul liniei curente. alignSelf este echivalentul lui alignItems pentru specificarea alinierii elementului însuși și nu a copiilor săi. Utilizarea flex-end vă permite să obțineți un efect similar celui din float: dreapta în CSS.
etichetă: color: '# 0d8898', fontSize: 20, alignRight: alignSelf: 'flex-end',
Următoarele sunt cele două câmpuri de text împreună cu etichetele acestora.
În acest moment, pagina ar trebui să arate astfel:
Iată stilul pentru TextInput:
textInput: înălțime: 80, fontSize: 30, fundalColor: '#FFF',
Acum s-ar putea să fi început să observați de ce recipient componenta este importantă. Vă permite să încapsulați stilurile implicite, astfel încât să nu terminați să le declarați din nou în fiecare fișier. Acesta este un principiu de bază al Reactului: trebuie să vă străduiți întotdeauna să reutilizați componentele de fiecare dată când vedeți o oportunitate.
Butonul pentru conectarea la Facebook este puțin diferit de butoanele pe care le-ați creat mai devreme. De data aceasta are conținut în interiorul său, care afișează o pictogramă împreună cu un text. Acestea sunt adăugate în locul eticheta pentru a personaliza în continuare conținutul butonului.
După ce a fost adăugat, pagina ar trebui să arate astfel:
Adăugați stilurile pentru butonul de conectare Facebook:
transparentButton: marginTop: 30, borderColor: '# 3B5699', borderWidth: 2, butonulBlueText: fontSize: 20, color: '# 3B5699', buttonBigText: fontSize: 20, fontWeight: flexDirection: 'rând',
Nu este nimic de remarcat aici cu excepția cazului styles.inline, care este folosită ca o clasă de ajutor pentru stivuirea orizontală a tuturor elementelor din interiorul acesteia. Acest lucru are un efect similar cu cel al utilizării în HTML pentru a împacheta textul pe care doriți să îl afișați în linie. În CSS, acest lucru poate fi realizat folosind oricare dintre ele afișare: inline sau afișare: inline-block.
Ultimele elemente de pe acest ecran sunt Conectare și Anulare butoane. Ei au nevoie de mai mult spațiu deasupra lor decât celelalte elemente, deci este mai bine să le înfășurați într-un container (subsol) și se aplică marginTop la el. Acest lucru are mai mult sens decât să declarăm un stil nou doar pentru aceste butoane.
În cele din urmă, adăugați stilul pentru Conectare și Anulare butoane:
Button: fontSize: 20, culoare: '#FFF',, butonBlackText: fontSize: 20, culoare: '# 595856', primButton: backgroundColor: '# 34A853'
În cele din urmă, nu uitați să definiți codul care va fi executat atunci când vreunul dintre butoane este apăsat!
apăsați () // executați orice cod aici
Asta e! În acest tutorial ați creat cu succes o pagină de conectare utilizând cunoștințele Flexbox. Pe parcurs, ați învățat, de asemenea, cum să utilizați o bibliotecă terță parte denumită React Icoane vectoriale native pentru a adăuga cu ușurință pictograme în aplicația dvs. Cum a comparat soluția mea cu cea proprie? Anunțați-ne în forumul de discuții de mai jos.
În următorul tutorial din această serie, veți afla cum să creați un ecran de calendar. Între timp, verificați câteva din celelalte tutoriale ale noastre despre React Native și Flexbox.
