Share
În acest post, veți afla ce este ExpoKit și cum este folosit pentru adăugarea de funcții native la aplicațiile Expo. Veți învăța, de asemenea, câteva dintre argumentele sale pro și contra.
În versiunea mai ușoară de reacție a dezvoltării native cu postul Expo, ați aflat despre modul în care Expo îi ușurează pe începători să creeze aplicații cu React Native. Ați învățat, de asemenea, că Expo permite dezvoltatorilor să se dezvolte mai repede, deoarece nu mai este nevoie să configurați aplicații Android Studio, Xcode sau alte instrumente de dezvoltare.
Dar, așa cum ați văzut, Expo nu suportă toate caracteristicile native pe care o aplicație le-ar putea avea nevoie. Deși echipa Expo lucrează întotdeauna pentru a susține funcționalitatea mai nativă, este o idee bună să învățați cum să convertiți un proiect Expo existent într-un proiect nativ standard, astfel încât să puteți trece cu ușurință în caz de necesitate. Deci, în această serie de două părți, vom examina cum să facem asta.
În acest post, veți afla ce ExpoKit este și când veți avea nevoie de ea, precum și care dintre funcțiile platformei Expo sunt reținute și pierdute odată ce detașați la ExpoKit.
Acest tutorial presupune că ați configurat deja calculatorul pentru dezvoltarea Expo și React Nativă. Aceasta înseamnă că veți avea nevoie de Android Studio sau Xcode sau ambele, în funcție de locul în care doriți să implementați. Asigurați-vă că ați verificat Începeți cu Ghidul Expoziției, și, de asemenea, ghidul "Noțiuni de bază" în documentele React Native din fila "Construirea de proiecte cu cod nativ" pentru platforma dvs. specifică, dacă nu ați făcut-o deja.
Cunoașterea Node.js este utilă, dar nu este necesară.
ExpoKit este o bibliotecă Obiectiv-C și Java care vă permite să utilizați platforma Expo într-un proiect React Nativ standard. Când spun "proiectul React Nativ standard", vreau să spun una care a fost creată folosind reactiv-nativ init comanda.
Dezavantajul detașării la ExpoKit este că va trebui să configurați mediul de dezvoltare nativ standard pentru React Native!
Un alt dezavantaj este că sunteți limitat la versiunea React și React Nativă folosită de ExpoKit în momentul detașării aplicației. Acest lucru înseamnă că ar putea exista probleme de compatibilitate pe care va trebui să le rezolvați dacă modulul nativ pe care încercați să îl instalați depinde de o versiune anterioară de React sau React Native.
Dacă credeți că aplicația dvs. va avea nevoie de o mulțime de module native pe care interfețele integrate Reactive Native și Expo nu suportă deja, vă sugerăm să evitați utilizarea API-urilor Expo. În acest fel, puteți să "scoateți" cu ușurință un proiect React Nativ standard în momentul în care trebuie să începeți utilizarea modulelor native personalizate.
S-ar putea să doriți să vă desprindeți proiectul Expo existent din oricare din următoarele motive:
Detașarea la ExpoKit înseamnă că veți pierde unele dintre caracteristicile oferite de platforma Expo. Cu toate acestea, următoarele caracteristici esențiale sunt încă păstrate:
Prin detașarea la ExpoKit, veți pierde următoarele funcții:
Accentsconagua
exp construi comandă pentru a construi .ipa sau .apk fișiere pe serverele Expo. Aceasta înseamnă că trebuie să instalați aplicația Android Studio sau Xcode (în funcție de platforma pe care doriți să o implementați) și să creați aplicația la nivel local. Alternativ, puteți utiliza Microsoft App Center pentru a crea aplicația dacă nu aveți încă un mediu de dezvoltare local. Rețineți că nu puteți utiliza comenzi cum ar fi reaction-native run-android sau reactiv-nativ run-ios pentru a rula aplicația, așa cum ați proceda într-un proiect React Nativ standard. Pentru a arăta beneficiul detașării în ExpoKit, vom crea o aplicație care are nevoie de o caracteristică nativă pe care platforma Expo nu o suportă în prezent. Aplicația va fi o aplicație de distribuire a locației. În majoritatea cazurilor, va rula în fundal, preluând locația curentă a utilizatorului. Acesta va trimite apoi acea locație prin Pusher. De asemenea, vom crea o pagină web care să afișeze locația curentă a utilizatorului pe o hartă.
Iată cum va arăta aplicația:
Puteți găsi sursa completă a proiectului în reparația GitHub tutorial.
În restul acestui post, ne vom concentra pe achiziționarea aplicației noastre. Apoi, în următoarea postare, vom elabora o parte din codul cheie pentru a interacționa cu ExpoKit.
Dacă doriți să utilizați serviciile Pusher în aplicația dvs., va trebui să creați o aplicație în tabloul de bord Pusher. După ce v-ați conectat, mergeți la tabloul de bord, faceți clic pe Aplicațiile dvs. și apoi Creați o aplicație nouă, și introduceți numele aplicației:
Odată ce aplicația a fost creată, mergeți la Setările aplicației și verificați Activați evenimentele clientului Caseta de bifat. Acest lucru ne va permite să declanșăm evenimentele Pusher direct din aplicație în loc de pe un server. Apoi faceți clic pe Actualizați pentru a salva modificările:
Puteți găsi cheile de sub Tastele pentru aplicații tab. Vom avea nevoie de acestea mai târziu, odată ce ne conectăm la aplicația Pusher.
În mod similar, trebuie să creați un proiect Google pentru a utiliza API-ul Google Maps și API-ul Geolocation. Accesați console.developers.google.com și creați un nou proiect:
Apoi, accesați tabloul de bord al proiectului și faceți clic pe Activați API-urile și serviciile. Caută Aplicația JavaScript API pentru Google Maps și Google Maps Geocoding API și să le permită acestora.
Din tabloul de bord al proiectului, mergeți la scrisori de acreditare și faceți clic pe Creați acreditări> Cheia API. Luați notă de cheia API pe care o generează, pe măsură ce o vom folosi ulterior.
Rulați următoarele comenzi în directorul de lucru:
exp init ocdmom cd ocdmom exp start
Aplicația Expo este gata să testeze. Doar scanați codul QR cu aplicația client Expo pentru iOS sau Android.
Acum suntem gata să începem să codificăm aplicația. Vom începe să ne dezvoltăm ca un proiect Expo standard și apoi vom detașa la ExpoKit când trebuie să folosim funcții native personalizate.
Goliți conținutul App.js fișier în rădăcina directorului de proiect și adăugați următoarele importuri:
import Reacționează de la "reacționează"; importați StyleSheet, Text, View de la "reactive-native";
De asemenea, vom folosi o componentă antet personalizată:
importați antetul de la "./components/Header";
În constructor, setați unique_code la starea inițială:
Extinderea clasei extinse App extinde React.Component constructor (recuzită) super (recuzită); this.state = unique_code: Math.random () .toString (36) .substring (7) .toUpperCase () // generează un șir aleatoriu;
Interfața de utilizare a aplicației noastre va afișa acest cod unic.
render () return (); Cod unic This.state.unique_code
În cele din urmă, iată codul pentru Antet (Componente / Header.js) componentă:
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'); This.props.text
Aceasta a fost prima parte a seriei noastre cu două părți privind detașarea aplicațiilor Expo la ExpoKit. În acest post, ați învățat conceptele din spatele ExpoKit și ați început să configurați un proiect care va utiliza funcționalitatea ExpoKit.
În următoarea postare, vom detașa aplicația de ExpoKit și apoi vom continua să o codificăm astfel încât să o putem rula pe un dispozitiv.
Între timp, verificați câteva dintre celelalte postări despre dezvoltarea aplicațiilor Reactive Native!
