Jump Start Reagerer indfødte med Expo

Sep 16, 2025

hvordan

An image showing a React Native app running on a smartphone.

Reagere indfødte er en platform, der gør det muligt at opbygge indfødte mobilapps ved hjælp af JavaScript. Som navnet antyder, bruger det det Reagere , så komponering af mobile grænseflader svarer til at reagere på nettet. I stedet for at oprette komponenter ved hjælp af HTML-tags, har den sit eget sæt af komponenter, der binder til native UI-komponenter.

Reagere indfødte kan være vanskelig at oprette, især når det kommer til at skubbe meddelelser. Du skal oprette certifikater og dykke i objektive C for iOS og Java til Android. Imidlertid, Expo. Eliminerer behovet for dette.

Opbygning af en hjemmeside snarere end en app? Du kunne bruge en anstændig Website Builder. . Og for at opretholde webstedet, få din Web Hosting. nøjagtigt.

30 webdesign værktøjer til at fremskynde din arbejdsgang

Expo betyder, at du kan oprette reagere indfødte apps og implementere dem til App Stores bruger kun JS. Derudover tilbyder det en SDK med adgang til native funktionaliteter som meddelelser, kamera, kontakter, placering og så videre. Det giver også adgang til nogle UI-komponenter, der ikke er inkluderet i den reagerende natkere, men bruges ofte, såsom ikoner, sløret synspunkter og så videre uden at skulle skrive en linje af native kode.

Expo kan også oprette indsendelse-klar app bygger uden at skulle bygge ved hjælp af Xcode eller Android Studio. Hvis du ikke har brugt enten før, kan de være et skræmmende sted, især hvis du lige er i gang med at reagere indfødte - eller ikke er sikre på generelt med Sådan laver du en app . Apps (eller projekter) kan også udgives til Expo snarere end at indsende til en App Store, som gør det muligt for brugerne at prøve projektet via Expo Mobile Client. Bare rolig, dette vil blive dækket senere!

Opbygger du din app med et hold? Gem dine filer i tilgængelig, pålidelig Sky lagring .

01. Opsætning Expo

Installation af Expo er en retfærdig proces. Gå over til Site. Og download den nyeste XDE, og installer derefter mobilappen på din telefon eller tablet. Mobilklienten gør det muligt at køre apps på en reel enhed via deres app uden at have brug for nogen udviklerlicenser eller certifikatopsætning på forhånd.

Du kan derefter offentliggøre apps til Expo-tjenesten, så brugerne kan køre dine færdige projekter via Expo Mobile Client, uden at skulle gå gennem App Store og Google Play Review-processer.

Expo understøtter bygningens stand-alone apps, der manuelt kan offentliggøres til App Store eller Play Store, men du ville kræve udviklerkonti for de platforme, du slipper på. Apples udviklerprogram koster £ 79 pr. År og Googles Play Console koster et engangsgebyr på $ 25 USD.

02. Opret din første app

An image showing the Expo XDE. — Denne XDE giver os detaljerede oplysninger til projektet. Vinduet Vinduet er React Native Packager, og det højre vindue viser nogen logfiler fra enheder

Lad os komme til forretning og oprette vores første app med Expo. Åbn Expo XDE, vælg Project & GT; Nyt projekt og vælg den tomme skabelon. Installer alle afhængigheder og start den reagerende native emballager, som bundter alle aktiverne.

Herfra kan du udgive appen, dele appen til Expo Mobile Client eller køre appen på en simulator. Denne app vil involvere oprettelse af push notifikationer, så du vil dele til Expo Mobile Client, da simulatorer ikke understøtter dem. Klik på Share-knappen for at få en QR-kode til at scanne eller indstillingen for at sende et link via SMS eller e-mail. Scan QR-koden med Expo Client. Dette kører appen via Expo Client, og den åbner op til en skærm med: 'Åbn app.js for at begynde at arbejde på din app!'

Med appen kører, skal du åbne projektet i din yndlingskode editor og åbne app.js. Find teksten ovenfor og skift den til den klassiske 'Hello World!', Så gem. Du skal se appen genindlæses automatisk og har teksten 'Hej World!' Nu synlig. Magi!

Mens du udvikler, vil du ryste enheden afsløre en udvikler-menu, som har hjælpsomme muligheder for debugging. Fra denne menu kan du også vende tilbage til Expo Home - nyttigt at afslutte appen eller skifte til en anden.

03. Tilføj meddelelser

Nu har du en grundlæggende app-opsætning og kørsel, lad os tilføje muligheden for at sende og modtage underretninger. Dette ville normalt kræve Mål-C og Java, der integrerer en tredjeparts service til at sende meddelelserne, og du også skal oprette certifikater for iOS og oprette nøgler til Android.

For det første skal du importere tilladelser og meddelelser fra Expo og oprette en ny funktion i app-klassen:

 Import {Tilladelser, meddelelser} fra 'Expo';
Eksport Standard Class App udvider React.Component {
  async registerforpushnotifikationer () {
  }
}

Her bruger du ASYNC-søgeordet til at gøre brug af ES2017 Async / Await-funktionen - Reager indfødte har Babel, der arbejder under emhætten, så du kan udnytte hele den nye JavaScript-godhed. Lad os nu bede om meddelelsesrettigheder og hente Expo Push Token - for at identificere enheden - så Expo ved, hvor du skal sende Push-meddelelser:

 async registerforpushnotifikationer () {
  const resultat = afventer tilladelser.askasync (tilladelser.remote_notifikationer);
  hvis (resultat.status! == 'givet') {
    Vend tilbage;
  }
  const token = afventer meddelelser.getexpopushtokenasync ();
  console.log (token);
}

Her vil du bede om meddelelsesbevis ved hjælp af Tilladels.askasync () -metoden. Alert vil kun vise på iOS, da Android muliggør underretninger som standard. På trods af dette skal du faktisk stadig løbe igennem den samme logik på Android, da det er muligt at slå meddelelser fra.

Derefter skal du kontrollere svaret. Hvis meddelelserne ikke gives, kan du stoppe og returnere ud af funktionen. Hvis der gives meddelelser, får du push-token fra Expo-tjenesten. Endelig kan du logge token ud for senere at bruge til at teste underretninger, og dette vil blive logget på Expo XDE.

Det er værd at bemærke på dette tidspunkt, at - på iOS - denne advarsel kan kun udløses en gang ved design; Så hvis en bruger nægter tilladelse, kan du overveje at tilføje en brugerdefineret meddelelse eller alarm, inden du vender ud af funktionen. For at aktivere meddelelser på dette tidspunkt skal brugeren gå til appens indstillinger (i vores tilfælde, det vil være Expo) & GT; Meddelelser og aktiver dem derfra. På grund af dette skal du slette Expo Mobile Client og derefter geninstallere, hvis du ønsker at teste tilladelsens alarm på iOS mere end én gang.

Derudover giver Expo en metode kaldet Tilladelser.Getasync (), og dette virker på samme måde som tilladelser. Kaskasync (), bare uden at affyre iOS-alarmen. Dette kan være nyttigt, hvis du vil tjekke status først for at oprette en brugerdefineret flow, der vil bede dig om tilladelser, for eksempel. Hvis IOS-advarslen tidligere er udløst (husk, kan den kun fyret én gang pr. App Installer), vil tilladelsen.askasync () returnere de samme oplysninger som Tilladelser.Getasync (), så i vores brugssag har vi ikke brug for at bruge tilladelser.getasync ().

Derefter skal du ringe til denne funktion i ComponentDidMount Lifecycle-metoden, så den kører på App Launch:

 ComponentDidMount () {
  this.registerforpushnotifications ();
}

Dernæst kan din app, hvis du accepterer anmeldelsesgodtgørelsen, at modtage lokale og fjernbetjeninger. Lokale meddelelser oprettes derefter og sendes via enheden direkte til appen og kræver ikke en internetforbindelse. Fjernmeddelelser kommer fra en server og sender meddelelsen via Apple Push Notification System (APNS) eller Google Cloud Messaging (GCM) -tjenester. Denne proces vil også kræve adgang til en internetforbindelse for at modtage dem.

Expo har en tjeneste til at sende meddelelser på https://exp.host/--/api/v2/push/Send; Alt du skal gøre er at sende nogle data til det. Dette vil så se lidt som følgende:

 {
  // push token.
  "Til": & lt; token fra appen & gt;
  // meddelelsens titel.
  "Titel": "Meddelelsestitel",
  // anmeldelsesorganet.
  "Body": "Notification Body",
  // PASS i data som et objekt, kan dette bruges ved håndtering af meddelelsen.
  "Data": {"Value": "Hej World!" }
}

A newly created React Native app showing a message with the words 'Hello world!' — Expo Toolkit gør det muligt at sende og modtage push notifikationer ubesværet

Før vi tester en anmeldelse, vil vi konfigurere vores app til at håndtere meddelelser, hvis appen er åben. Ved design, iOS og Android viser ikke en meddelelse, når en app er åben. Du kan også håndtere data, der sendes i push-beskeden her, hvis vi skal handle på det. Lad os oprette en ny funktion til at håndtere dette og advare dataværdien:

 Handlenotification (Meddelelse) {
  Alert (notifikation.data.value);
}

Derefter skal du i vores ComponentDidMount Lifecycle-metode oprette en lytter, som kalder den anmeldelseshåndterer, vi netop har oprettet:

 ComponentDidMount () {
  this.registerforpushnotifications ();
  Notifications.addListener (This.Handlenotification);
}

Du er nu sat. Lad os sende en push-meddelelse med en CURL-anmodning:

 Curl \
  -X post \
  -H "Indholdstype: Applikation / JSON" \
  -d '{
    "Til": "& lt; token & gt;",
    "Titel": "Meddelelsestitel",
    "Body": "Notification Body",
    "Data": {"Value": "Hej World!" }
  } '\
  https://exp.host/--/api/v2/push/send

Du kan få fat i denne krølle kommando her . Hvis du ikke er bekendt med CURL, kan du sende anmodningen ved hjælp af noget som Postbud , som bruger en GUI til at sende anmodninger.

Når anmodningen har sendt, skal du nu se, at meddelelsen kommer igennem. Der er ingen begrænsninger på at bruge Expo Push-tjenesten. I et virkeligt scenario opfordres det til at bruge Batch API ved at sende en række push notifikationer i batcher på 100, der skal sendes ud for effektivitet:

 [
  {// notifikationsobjekt som ovenfor},
  {// en anden meddelelse objekt}
]

04. Udgiv med Expo

Så nu hvor vi har en skinnende ny reagerer indfødte app (selvom det ikke gør meget endnu!), Hvordan lader vi andre bruge det uden at køre det fra Expo XDE? Den enkleste måde er ved at klikke på Udgivelse fra XDE. Dette vil offentliggøre projektet til Expo, og der vises et link på din profil, som du kan finde på https://expo.io/@.

Når du besøger det offentliggjorte projektlink, vil der være en QR-kode til scanning (placeret blandt de samme muligheder som XDE) med Expo Mobile Client, ligesom under udvikling. Hvis vi vil opdatere appen, er alt, hvad vi skal gøre, genudgives, og ændringerne vil være tilgængelige for brugeren, når du kører appen igen.

Denne artikel blev oprindeligt offentliggjort i udstedelse 297 af netto, verdens bedst sælgende magasin for webdesignere og udviklere. Abonner på nettet her .

Ønsker du at lære flere måder, du kan mestre, reagere?

Kristijan Ristovski is giving his workshop Learn How to Think in React at Generate London from 19-21 September 2018. — Kristijan Ristovski giver sit workshop lære at tænke i reagere på generere London fra 19-21 september 2018

Hvis du er interesseret i at lære mere om reagere, skal du sørge for at du har hentet din billet til Generer London fra 19-21 september 2018 . Efter at have grundlagt React Academy for at undervise reagere rundt om i verden og lancerede sizzy.co. og ok-google.io , Kristijan Ristovski vil levere sit værksted - lære at tænke i reagere - hvor han vil undersøge reagere bedste praksis og lære dig løsninger på reelle problemer, som du måske støder på i processen med at opbygge en app.

Generer London finder sted fra 19-21 september 2018. Få din billet nu .

Relaterede artikler:

Få dit hoved til at reagere med disse fem faktorer
10 ekspertreaktejer tips, som du har brug for at vide i dag
Byg en indfødt mobilapp med reagere indfødte

Jump Start Reagerer indfødte med Expo

01. Opsætning Expo

02. Opret din første app

03. Tilføj meddelelser

04. Udgiv med Expo

Ønsker du at lære flere måder, du kan mestre, reagere?

hvordan - Mest populære artikler

Jamstack: Byg hurtigere, mere effektive hjemmesider i dag

Opret din egen kalligrafisk børste i Illustrator

30 Keyshot Rendering Tips

Speed sculpt en væsen i zbrush

Sådan opretter du en fotorealistisk rumscene

Opret en app, der samler sensordata

Sådan laver du en realistisk sportsvognsgender

Sådan får du din Zbrush-model til Maya

Kategorier