Jump Start reagoi natiivi Expo

Sep 15, 2025

Miten tehdään

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

Reagoida natiivi on foorumi, jonka avulla voit rakentaa Native Mobile -sovelluksia JavaScript-laitteella. Kuten nimi tarkoittaa, se käyttää Reagoida , joten mobiililiitännät säveltäminen on samanlainen kuin reagoida rainaa. Sen sijaan, että luodaan komponentteja HTML-tunnisteilla, sillä on oma joukko komponentteja, jotka sitoutuvat alkuperäisiin käyttöliittymiin.

Reagoi natiivi voi olla hankala perustaa, varsinkin kun kyseessä on ilmoituksia. Sinun on perustettava sertifikaatit ja sukeltaa tavoite-C iOS: lle ja Javalle Androidille. Kuitenkin, Expo Poistaa tämän tarpeen.

Sivuston rakentaminen pikemminkin kuin sovellus? Voit käyttää kunnon Verkkosivuston rakentaja . Ja ylläpitää sivustoa, saat sivujen ylläpito naulankantaan.

30 Web-suunnittelutyökalut työnkulun nopeuttamiseksi

Expo tarkoittaa, että voit luoda reagoida alkuperäiset sovellukset ja ottaa ne käyttöön sovellusliikkeisiin vain JS: n avulla. Lisäksi se tarjoaa SDK: n, jolla on pääsy alkuperäisiin toimintoihin, kuten ilmoituksiin, kameraan, yhteyksiin, sijaintiin ja niin edelleen. Se tarjoaa myös pääsyn joihinkin UI-komponentteihin, jotka eivät sisälly reagoivaan natiivin ytimeen, mutta niitä käytetään usein, kuten kuvakkeet, hämärtyneet näkymät ja niin edelleen tarvitsematta kirjoittaa rivi natiivikoodi.

Expo voi myös luoda lähetysvalmis sovellus rakentaa ilman rakentamista Xcode- tai Android-studiolla. Jos et ole käyttänyt ennen aikaisemmin, ne voivat olla pelottava paikka, varsinkin jos olet aloittanut reagoida natiivi - tai ei ole luottavainen yleensä Miten tehdä sovellus . Sovellukset (tai projektit) voidaan julkaista myös Expoon sen sijaan, että lähetät App Storeen, jonka avulla käyttäjät kokeilla projektia Expo Mobile Clientin kautta. Älä huoli, tämä katetaan myöhemmin!

Oletko rakentamassa sovelluksesi tiimin kanssa? Tallenna tiedostot saatavilla, luotettava pilvivarasto .

01. Määritä Expo

EXPO: n asentaminen on suoraviivainen prosessi. Päätä sivuston ja lataa uusin XDE ja asenna sitten mobiilisovellus puhelimeesi tai tablettiin. Mobile Client mahdollistaa apps reaaliseen laitteeseen sovelluksen kautta tarvitsematta kehittäjälupien tai varmenteen asennuksen etukäteen.

Voit sitten julkaista sovellukset Expo-palveluun niin, että käyttäjät voivat käyttää valmiita hankkeita Expo Mobile -asiakkaiden kautta ilman, että tarvitset App Storen ja Google Play Review -prosesseja.

EXPO tukee rakennuksen erillisiä sovelluksia, jotka voidaan julkaista manuaalisesti App Storesta tai Play Storesta, mutta tarvitsisit kehittäjän tilejä, jotka vapautuvat. Applen kehittäjäohjelma maksaa 79 puntaa vuodessa ja Googlen pelikonsoli maksaa yhden kerran $ 25 USD.

02. Luo ensimmäinen sovellus

An image showing the Expo XDE. — Tämä XDE antaa meille yksityiskohtaisia tietoja hankkeesta. Vasen ikkuna on React Native Packager ja oikea ikkuna näyttää kaikki laitteet

Mennään liiketoimintaan ja luomaan ensimmäinen sovellus Expo. Avaa Expo XDE, valitse Project & GT; Uusi projekti ja valitse tyhjä malli. Asenna kaikki riippuvuudet ja aloita reagoiva natiivipakkaus, joka niputtaa kaikki varat.

Täältä voit julkaista sovelluksen, jakaa sovelluksen Expo Mobile Client -ohjelmaan tai suorittaa sovelluksen simulaattorilla. Tämä sovellus liittyy push-ilmoituksiin, joten aiot jakaa Expo Mobile Client, koska simulaattorit eivät tue niitä. Napsauta Jaa-painiketta saadaksesi QR-koodin skannaamaan tai vaihtoehto lähettämään linkki tekstiviestillä tai sähköpostilla. Skannaa QR-koodi Expo-asiakkaalla. Tämä suorittaa sovelluksen Expo-asiakkaan kautta ja se avautuu näytölle: "Avaa App.js aloittaa toimintansa!"

App käyttöön käynnissä, avaa projekti suosikkikoodi editori ja avaa App.js. Etsi yllä oleva teksti ja muuta sitä klassiseen "Hello Worldiin", sitten tallenna. Sinun pitäisi nähdä sovellus uudelleen ladata automaattisesti ja sinulla on teksti "Hello World!" Nyt näkyvä. Taika!

Kun kehität, laitteen ravistelu paljastaa kehittäjän valikon, jolla on hyödyllistä vaihtoehtoja virheenkorjaukseen. Tästä valikosta voit myös palata Expo Home - hyödyllistä poistua sovelluksesta tai vaihtaa toiseen.

03. Lisää ilmoitukset

Nyt sinulla on perussovellus perustettu ja käynnissä, lisätään kyky lähettää ja vastaanottaa ilmoituksia. Tämä vaatii tavallisesti tavoite-C ja Java integroimalla kolmannen osapuolen palvelun lähettämään ilmoitukset ja sinun on myös perustettava sertifikaatit iOS: lle ja luodaan Androidin avaimet.

Ensinnäkin sinun on tuettava käyttöoikeudet ja ilmoitukset Expo ja luo uusi tehtävä sovellusluokassa:

 Tuonti {Oikeudet, ilmoitukset} alkaen "Expo";
Vienti oletusluokan sovellus laajenee React.component {
  async rekisteriä () {
  }
}

Täällä käytät Async-avainsanaa, jotta voit käyttää ES2017 Async / Await -ominaisuutta - reagoida natiivi on tutustunut, joten voit hyödyntää kaiken uuden JavaScript-hyvyyden. Pyydetään nyt ilmoitusoikeuksia ja hakea Expo Push Token - tunnistaa laite - niin että Expo tietää, mistä lähettää push-ilmoituksia:

 Async rekisteriä () {
  CONST-tulos = Await Permissions.KaSync (Permissions.remote_notisuus);
  Jos (tulos.Status! == "myönnetään") {
    palata;
  }
  const token = odottaa ilmoituksia.gexPopusHtokensync ();
  konsoli.log (merkki);
}

Täällä pyydät ilmoituksen lupaa käyttöoikeudet.KaSync () -menetelmällä. Hälytys näkyy vain iOS: ssä Android mahdollistaa oletuksena ilmoitukset. Tästä huolimatta sinun on vielä käytettävä samaa logiikkaa Androidissa, koska on mahdollista kääntää ilmoituksia.

Seuraavaksi tarkista vastaus. Jos ilmoituksia ei myönnetty, voit lopettaa ja palata toiminnosta. Jos ilmoitukset myönnetään, saat push-tunnuksen Expo-palvelusta. Lopuksi voit kirjautua tunnuksen myöhempää käyttöä varten testausilmoituksiin ja tämä kirjautuu Expo XDE: hen.

On syytä huomata tässä vaiheessa, että - iOS - tämä hälytys voidaan laukaista vain kerran suunnittelulla; Joten, jos käyttäjä kieltää luvan, kannattaa harkita mukautettua ilmoitusta tai hälytystä ennen paluuta toiminnosta. Jotta ilmoitukset olisi tässä vaiheessa, käyttäjän on siirryttävä sovellusasetuksiin (meidän tapauksessamme, tämä on Expo) & GT; Ilmoitukset ja anna ne sieltä. Tämän vuoksi sinun on poistettava Expo Mobile Client ja asenna sitten uudelleen, jos haluat testata iOS: n luvan hälytyksen useammin kuin kerran.

Lisäksi Expo tarjoaa menetelmän nimeltään Permissions.Guetasync () ja tämä toimii samalla tavalla kuin Permissions.asasync (), vain irrottamatta iOS-hälytystä. Tämä voi olla hyödyllinen, jos haluat tarkistaa tilan ensin luodaksesi mukautetun virtauksen, joka pyytää sinua esimerkiksi. Jos iOS-hälytys on aiemmin käynnistetty (muista, se voidaan ampua vain kerran sovelluksen asennuksesta), Permissions.askasync () palauttaa samat tiedot kuin käyttöoikeudet.Guetasync (), joten käyttötapauksessa emme tarvitse Käyttöoikeudet.Guetasync ().

Sitten sinun on kutsuttava tämä toiminto ComponentDidmount Lifecycle -menetelmässä niin, että se toimii sovelluksen käynnistämisessä:

 ComponentDidmount () {
  Tämä.registerpushnotisuus ();
}

Seuraavaksi, jos hyväksyt ilmoituksen luvan, sovelluksesi voi vastaanottaa paikallisia ja kaukoilmoituksia. Paikalliset ilmoitukset perustetaan ja lähetetään laitteen kautta suoraan sovellukseen ja eivät vaadi Internet-yhteyttä. Etäilmoitukset tulevat palvelimelta ja lähettävät ilmoituksen Apple Push -ilmoitusjärjestelmän (APNS) tai Google Cloud Messing (GCM) kautta. Tämä prosessi edellyttää myös Internet-yhteyden pääsyä vastaan.

Expo on palvelu lähettää ilmoituksia osoitteessa https://exp.host/--/api/v2/push/send; Sinun tarvitsee vain lähettää joitain tietoja siihen. Tämä näyttää sitten vähän seuraavista:

 {
  // push merkki.
  ":" ": & Lt; token sovelluksesta & gt;
  // ilmoituksen otsikko.
  "Otsikko": "Ilmoitus otsikko",
  // ilmoituselin.
  "Body": "Notification Body",
  // Siirrä tietoja kohteeksi, tätä voidaan käyttää ilmoituksen käsittelyssä.
  "Tiedot": {"arvo": "Hei World!" }
}

A newly created React Native app showing a message with the words 'Hello world!' — Expo Toolkit tekee lähettämistä ja vastaanottaa push-ilmoituksia vaivatonta

Ennen kuin testata ilmoitusta, määritämme sovelluksemme käsittelemään ilmoituksia, jos sovellus on auki. Suunnittelussa iOS ja Android eivät näytä ilmoitusta, kun sovellus on auki. Voit myös käsitellä mitä tahansa Push-viestiin lähetettyjä tietoja, jos meidän on toimittava sitä. Luodaan uusi tehtävä käsitellä tätä ja hälyttää Data-arvon ominaisuuden:

 Handlentification (ilmoitus) {
  hälytys (ilmoitus.Data.value);
}

Sitten ComponentDidMount Lifecycle -menetelmässä sinun on perustettava kuuntelija, joka kutsuu juuri luodun ilmoituksen käsittelijään:

 ComponentDidmount () {
  Tämä.registerpushnotisuus ();
  Ilmoitukset .Addlistener (this.andlentification);
}

Olet nyt asetettu. Lähetämme push-ilmoituksen Curl-pyynnöstä:

 Curl \
  -X POST \
  -H "Sisältötyyppi: Sovellus / JSON" \
  -d '{
    "": "& Lt; token & gt;",
    "Otsikko": "Ilmoitus otsikko",
    "Body": "Notification Body",
    "Tiedot": {"arvo": "Hei World!" }
  } "\ T
  https://exp.host/--/api/v2/push/send

Voit napata tämän Curl-komennon tässä . Jos et tunne Curl, voit lähettää pyynnön käyttämällä jotain Postinkantaja , joka käyttää GUI: tä lähettämään pyyntöjä.

Kun pyyntö on lähettänyt, sinun pitäisi nyt nähdä ilmoitus. EXPO PUSH -palvelun käytössä ei ole rajoituksia. Real-maailman skenaariossa kannustetaan käyttämään erä-sovellusliittymää lähettämällä joukon push-ilmoituksia 100: ssa, joka lähetetään tehokkuudesta:

 [
  {// ilmoituksen esine kuin edellä},
  {// Toinen ilmoitusobjekti}
]

04. Julkaise Expo

Joten nyt, kun meillä on kiiltävä uusi reagoi natiivi app (vaikka se ei tee paljon vielä!), Miten annamme muille käyttää sitä käyttämättä sitä Expo XDE: stä? Yksinkertaisin tapa on klikkaamalla julkaisua XDE: ltä. Tämä julkaisee projektin Expo ja linkki näkyy profiilissasi, josta löydät osoitteesta https://expo.io/@&ltfrusername>.

Kun vierailet julkaistussa projektilinkillä, on QR-koodi skannata (Sama vaihtoehto kuin XDE) Expo Mobile Client, aivan kuten kehityksen aikana. Jos haluamme päivittää sovelluksen, sinun tarvitsee vain julkaista, ja muutokset ovat käyttäjän käytettävissä käynnissä sovelluksen uudelleen.

Tämä artikkeli julkaistiin alun perin julkaisussa 297, maailman myydyin aikakauslehti Web-suunnittelijoille ja kehittäjille. Tilaa verkko tähän .

Haluatko oppia lisää tapoja, joilla voit ohjata?

Kristijan Ristovski is giving his workshop Learn How to Think in React at Generate London from 19-21 September 2018. — Kristijan Ristovski antaa työpajan oppia ajattelemaan reagoida Generate Lontoossa 19.-21. Syyskuuta 2018

Jos olet kiinnostunut oppimaan lisää reagoiesta, varmista, että olet ottanut lipun Luo Lontoo 19.-21. Syyskuuta 2018 . On perustettu reagoida Akatemian opettamaan reagoimaan ympäri maailmaa ja käynnistettiin sizzy.co ja ok-google.io , Kristijan Ristovski tulee toimittaa ateljeessaan - Opi ajattelemaan Reagoi - jossa hän tutkii Reagoi parhaat käytännöt ja opit ratkaisuja todellisiin ongelmiin, joita saattaa esiintyä vuonna rakentamassa sovelluksen.

Luo Lontoo järjestetään 19.-21. Syyskuuta 2018. Hanki lippu nyt .

Aiheeseen liittyvät artikkelit:

Hanki pääni reagoida näiden viiden tekijän kanssa
10 Expert Reaktjs Vinkkejä, jotka sinun täytyy tietää tänään
Rakenna natiivi mobiilisovellus reagoida natiivi

Jump Start reagoi natiivi Expo

01. Määritä Expo

02. Luo ensimmäinen sovellus

03. Lisää ilmoitukset

04. Julkaise Expo

Haluatko oppia lisää tapoja, joilla voit ohjata?

Miten tehdään - Suosituimmat artikkelit

Adobe XD: Auto-animate-ominaisuuden käyttäminen

Aloita Artrage

Affinity Designer: Viennin käyttäminen

Luo Ripple-vaikutuksia Pixijsin kanssa

Kuinka tehdä oman luonteen Raamatun

Kuinka aloittaa Sass

Nopeuttaa 3D-mallinnuksen

Kuinka käyttää varastossa valokuvaus luovasti suunnittelussa

Luokat