Noțiuni de bază cu un șablon de aplicație React Nativă

Proiectarea unei aplicații Native React de la zero este adesea un proces greoi, mai ales partea de proiectare, deoarece trebuie să planificați atât dispozitivele Android cât și dispozitivele iOS. Nu numai că, dar trebuie să vă asigurați că aplicația dvs. arată frumos pe diferite dimensiuni ale ecranului. 

Acesta este locul în care șabloanele vin la îndemână. Ele se ocupă de designul inițial pentru dvs., astfel încât aplicația dumneavoastră să arate bine, cu un efort minim de design din partea dumneavoastră. Există o mână de astfel de șabloane la CodeCanyon, o piață pentru șabloane și pluginuri. Aici puteți găsi diferite tipuri de șabloane adaptate tipului de aplicație pe care doriți să o creați.

În acest tutorial, vom examina modul de utilizare a șablonului BeoStore. După cum sugerează și numele, BeoStore este un șablon de aplicații e-commerce pentru React Native. 

Obținerea șablonului de pe piață

Puteți descărca șablonul accesând pagina de produse BeoStore de la CodeCanyon. Este un șablon plătit, dar merită investiția, deoarece are cele mai multe caracteristici necesare într-o aplicație de comerț electronic. Tot ce trebuie să faceți este să configurați șablonul și să îl personalizați în funcție de preferințele dvs. Pentru a obține o idee despre ceea ce oferă din cutie, iată câteva dintre caracteristicile sale importante:

• Integrare completa cu WooCommerce: dacă rulați un site Web WooCommerce, aplicația poate afișa aceleași produse pe care le aveți pe site-ul dvs. existent.
• Asistență pentru iOS și Android: aplicația rulează și arată bine pe platformele Android și iOS.
• Înregistrări sociale: clienții se pot conecta utilizând contul lor Facebook sau Google.
• Personalizare ușoară: totul este împărțit în componente. Astfel, puteți personaliza cu ușurință șablonul bazat pe marca dvs..
• Notificări: acest lucru vă avertizează automat clienții atunci când există o actualizare a situației comenzii lor. De asemenea, puteți trimite notificări push pentru promoțiile de produse. Comunicările push sunt implementate cu Firebase.  
• Suport multi-lingvistic: din cutie se obține limba engleză ca limbă principală. Vietnameză există ca a doua opțiune, dar puteți adăuga și propria voastră limbă.
• Asigurarea integrării plăților: plățile se fac cu PayPal.

Dacă încă nu aveți un cont Envato, vă puteți înscrie aici. După ce ați terminat, conectați-vă la contul nou creat. Apoi puteți reveni la pagina BeoStore și faceți clic pe Cumpară acum buton. 

Configurarea proiectului

Odată ce ați achiziționat șablonul, veți obține un link de descărcare în fișierul de arhivă al șablonului. Extrageți asta și veți obține o CodeCanyon folderul care conține MStore 2.2.

MStore 2.2 este directorul proiectului șablon. Mergeți mai departe și deschideți o nouă fereastră de terminal în interiorul directorului respectiv și executați următoarea comandă:

npm install

Aceasta va instala toate dependențele proiectului. Acest lucru poate dura ceva timp, în funcție de viteza de descărcare, deoarece trebuie să descărcați o mulțime de dependențe. Aruncăm o privire la package.json dacă doriți să vedeți pachetele pe care trebuie să le descărcați.

După ce sa terminat, există un pas suplimentar dacă doriți să creați pentru dispozitivele iOS. Mergeți la iOS și executați următoarele:

pod instalare

Apoi, pentru Android, conectați dispozitivul mobil la computer și executați:

dispozitive adb

Aceasta va afișa toate dispozitivele Android conectate la computer. Dacă aceasta este prima dată când vă conectați dispozitivul, trebuie să primiți un mesaj care vă întreabă dacă doriți să permiteți computerului să deplaseze USB. Doar atinge da odată ce ai primit promptitudinea.

Acum puteți rula aplicația de pe dispozitivul dvs. Android:

reaction-native run-android

Pentru iOS:

reactiv-nativ run-ios

Dacă nu ați întâmpinat nicio eroare, trebuie să vă întâmpinați cu următoarea pagină:

Pentru a vă oferi o imagine a diferitelor pagini disponibile în șablon, iată câteva screenshot-uri:

Depanarea remedierii de instalare a proiectului

În această secțiune, am compilat o listă a erorilor comune de configurare a proiectului și a soluțiilor acestora. 

Serverul de dezvoltare nu a început

Dacă serverul de dezvoltare nu a început automat când a fost executat reaction-native run-android sau reactiv-nativ run-ios, puteți rula manual executarea:

reactiv-nativ început

Uita-te prea mult pentru încărcare

Dacă apare o eroare similară cu următoarea:

Eroare în construcție DependencyGraph: Eroare: Watcher a durat prea mult pentru a încărca Încercați să executați "versiunea de supraveghere" din terminalul https://facebook.github.io/watchman/docs/troubleshooting.html la [object Object]. OnTimeout (index.js: 103: 16) la Timer.listOnTimeout (timers.js: 89: 15)

Acest lucru se datorează faptului că se execută o instanță Watchman existentă. Aceasta este o componentă a serverului de dezvoltare Reactive Native. Puteți rezolva această eroare și închideți Watchman executând următoarele comenzi:

sudo sysctl fs.inotify.max_user_instances = 99999 sudo sysctl fs.inotify.max_user_watches = 99999 sudo sysctl fs.inotify.max_queued_events = 99999 server shutdown-shutdown

Nu s-ar putea executa ADB Reverse

Dacă primiți următoarea eroare:

eroare: închis Nu a putut rula adb inversă: Comanda a eșuat: / path / to / android-sdk-linux / sdk / platform-tools / adb -s 300494a80ea22200 invers tcp: 8081 tcp: 8081

Aceasta înseamnă că dispozitivul dvs. Android rulează pe o versiune mai mică decât 5.0 (Lollipop). Aceasta nu este de fapt o eroare. Pur și simplu înseamnă că dispozitivul dvs. Android nu acceptă adb inversă, care este folosit pentru a conecta serverul de dezvoltare la dispozitiv prin intermediul depanării USB. Dacă acest lucru nu este disponibil, React Native revine la depanarea utilizând Wi-Fi. Puteți găsi mai multe informații despre el aici: Rularea pe dispozitiv.

Altceva ar putea determina eșecul dvs. de construire. Puteți derula terminalul pentru a vedea dacă există erori care au avut loc înainte de aceasta.

Nu se poate găsi variabilă _fbBatchedBridge

Dacă primiți următoarea eroare și serverul de dezvoltare se execută în modul Wi-Fi, aceasta înseamnă că nu ați configurat adresa IP a calculatorului în dispozitivul dvs. Android. (Aceasta, de obicei, vine doar cu dispozitive Android sub versiunea 5.0.)

ReferenceError: Nu se poate găsi variabila: _fbBatchedBridge (linia 1 în pachetul generat)

Puteți executa următoarele pentru a afișa opțiunile dezvoltatorului Nativ React pe dispozitiv:

adb shell introducere keyevent 82

Selectați Dev Setări din meniul care apare. Sub Debugging secțiune, apăsați pe Debug server gazdă și port pentru dispozitiv. Introduceți adresa IP internă atribuită de ruterul de acasă împreună cu portul în care rulează serverul de dezvoltare și apăsați pe OK:

YOUR_INTERNAL_IP: 8081

Reveniți la ecranul de pornire al aplicației și executați adb shell introducere keyevent 82 din nou. De data aceasta selectați Reîncarcă pentru a reîncărca aplicația.

Nu ar putea găsi Firebase, App Compat sau GMS Play Services

Dacă primiți erori "imposibil de găsit", înseamnă că nu ați instalat pachetul corespunzător utilizând Manager SDK Android.

Iată pachetele care trebuie instalate:

• Spațiul de asistență Android
• Android Support Library
• Serviciile Google Play
• Google Depozit

Asigurați-vă că actualizați pachetele existente, dacă există o actualizare disponibilă.

Alte probleme

Dacă problema dvs. nu implică nici una dintre cele de mai sus, puteți încerca următoarele:

• Consultați documentația privind depanarea.
• Consultați comentariile despre produse șablon. Puteți căuta eroarea pe care o primiți. Încercați să generalizați și să scurtați mesajul de eroare deși nu căutați întregul mesaj de eroare. Dacă nu găsiți eroarea, puteți încerca să-ți pui propria întrebare în firul de comentarii. Echipa de suport răspunde, de obicei, cu promptitudine.
• Încercați să căutați eroarea pe Google. Chiar dacă rezultatele pe care le găsiți nu implică utilizarea șablonului, acestea vă vor oferi o idee despre cum să rezolvați problema.
• Căutați pe StackOverflow sau întrebați o nouă întrebare. Asigurați-vă că includeți toate detaliile necesare (de exemplu, mesajul de eroare, pașii pe care i-ați făcut). Există un articol bun despre cum să adresați întrebări despre StackOverflow.

Personalizarea șablonului

Un bun loc pentru a începe să învățați cum să faceți lucrurile în șablon este documentația sa:

• Aspectul proiectului: arată unde se găsesc diferitele fișiere din șablon și pentru ce sunt folosite.
• Migrați WooCommerce: arată modul în care puteți conecta site-ul WooCommerce existent la aplicație. Conectarea aplicației la WooCommerce înseamnă că va putea prelua toate categoriile de produse și produsele din magazinul dvs. WooCommerce. 
• Migrate Services: arată cum se configurează numele aplicației, Firebase (pentru notificări push) și datele de conectare socială.
• Personalizare: arată modul de personalizare a limbii și a temelor.

Asigurați-vă că le verificați! Nu voi repeta ceea ce sa menționat în documentație. În schimb, ceea ce vom face în această secțiune este de a personaliza de fapt șablonul astfel încât să arate așa cum vrem.

Majoritatea setărilor de configurare a proiectului sunt stocate în interiorul app / Constants.js fişier. Iată câteva exemple de lucruri pe care le puteți schimba din acest fișier:

Integrarea WooCommerce: Adresa URL a magazinului WooCommerce utilizat de aplicație. În mod implicit, acest lucru folosește mstore.io.

WordPress: Adresa: 'http://mstore.io/api',, WooCommerce: url: 'http://mstore.io', consumerKey: ", consumerSecret:", wp_api: true, version: 'wc / v1 ', timeout: 10, // request timeout RootCategoryId: 0, Produs: Afișaj: ProductThumbnails: width: 180, height: 216, CatalogImages: width: 300, height: 360, SingleProductImage: lățimea: 600, înălțimea: 720,,,

Înregistrări sociale: Aceasta este implementată utilizând Auth0, o platformă de autentificare. În mod prestabilit, șablonul acceptă numai conectările Google și Facebook. Dar ar trebui să puteți adăuga orice serviciu acceptat de Auth0.

Auth0: clientId: ", domeniul:",,

icoane: Puteți utiliza orice pictogramă din Fontawesome, dar trebuie să introduceți prefixul cu numele ios-.

Pictogramă: // Icoanele aplicației. Verificați http://fontawesome.io/icons/ pentru mai multe pictograme. Meniu: 'ios-menu', Pagina principală: 'ios-home', Înapoi: 'ios-arrow-back', Înainte: 'ios-arrow-forward'; ', Log In:' ios-log-in ', SignOut:' ios-log-out ', ShoppingCart:' ios-cart ', ShoppingCartEmpty:' ios-cart-outline ' "ios-arrow-dorie", HideItem: "ios-arrow-dropup", ListMode: "ios-list-box", GridMode: "ios-grid" "Ios-star-outline", Wishlist: 'ios-star-outline', Wishlist: 'ios-heart', WishEmpty: 'ios-heart- outline', Șterge: 'ios-trash', AddToCart: 'ios-cart', MyOrder: 'ios-cube', Știri: 'ios-paper', Mail: 'ios-mail', RatioOff: 'ios-radio-button-off', RatioOn: -Search ", Close:" ios-close ", HappyFace:" ios-happy-outline ", SadFace:" ios-sad-outline ",

Temă: Culorile pentru diferitele componente care alcătuiesc fiecare pagină pot fi, de asemenea, actualizate. De exemplu, dacă doriți să modificați culoarea de fundal a antetului, puteți actualiza valoarea pentru In capul barului:

Culoare: TopBar: 'alb', TopBarIcon: '# 283747',

Imagini: Ecranul de pornire și alte imagini pot fi, de asemenea, actualizate prin specificarea unei noi căi la fiecare dintre următoarele:

Imagine: Logo: solicita ('./ images / logo.png'), SplashScreen: necesita ('./ images / splash_screen.png'), CategoryPlaceholder: ('./ images / default_avatar.jpg'), AvatarBackground: solicită ('./ images / avatar_background.jpg'), CheckoutStep1: ./images/line-2.png '), CheckoutStep3: solicitați (' ./ images / line-3.png '), Stripe: necesită (' ./ images / stripe.png '), PayPal: require ('. /images/PayPal.png '), CashOnDelivery: solicită (' ./ images / cash_on_delivery.png '), PlaceHolder: necesită (' ./ images / placeholderImage.png '),,

Aceste imagini sunt stocate în app / imagini , puteți să le înlocuiți pur și simplu dacă nu doriți să păstrați imaginile vechi.

• De asemenea, puteți schimba opțiunile PayPal din acest fișier. Asigurați-vă că vă creați contul PayPal Developer pentru a obține clientID și cheie secreta. Nu uitați să actualizați sandBoxMode la fals când implementați aplicația la producție, deoarece în mod implicit utilizează modul sandbox, astfel încât să nu se cheltuiască bani reali pentru tranzacții.

PayPal: clientID: ", secretKey:", sandBoxMode: true, // schimbare la falsă pe producție,

• Pentru a particulariza paginile individuale, trebuie să mergeți la app / containere director. Aici găsiți fișierele pentru fiecare pagină. De exemplu, dacă doriți să personalizați pagina de pornire, navigați la Acasă folder și deschideți index.js fişier. Odată deschis, veți vedea că pagina utilizează  componente pentru a face fiecare categorie de produs. Deci, dacă doriți să adăugați un stil general pentru  componente, trebuie să actualizați app / Componente / ImageCard / index.js fişier. În caz contrar, puteți actualiza pur și simplu stilurile din interiorul paginii:

this.styles = container: flex: 1, imagineCard: width: Constants.Dimension.ScreenWidth (1), height: 200,, mainCategoryText: color: 'white', // modifica culoarea categoriei text fontSize: 40 // face textul categoriei mai mare, numberOfProductsText: culoare: 'alb', fontSize: 15

Concluzie

Acest tutorial nu este în nici un caz un ghid cuprinzător cu privire la modul de utilizare a șablonului BeoStore. Dar am acoperit o mulțime de terenuri, în special în ceea ce privește depanarea de configurare, la care lipsesc documentele oficiale. 

Următorul pas este să cuplați acest șablon cu site-ul WooCommerce sau chiar să îl reprogramați pentru a putea fi utilizat pentru alte tipuri de aplicații.

Descărcați acum șablonul sau dacă doriți să aflați mai multe despre el, puteți consulta documentația aici. De asemenea, puteți găsi mai multe șabloane de aplicație React Native pe CodeCanyon.