Kuinka rakentaa uutissovellus React Native -sovelluksella

Ensimmäisessä viestissäni Mediumissa halusin jakaa kanssasi, kuinka tein uutissovelluksen React Native -sovelluksen kanssa.

Lähetetty alun perin blogiini.

Vaatimukset sovelluksen rakentamiselle:

  • Perustiedot JavaScriptistäkieli .
  • Asenna: Node.js, reagoi natiivisti npm: llä.
  • Käytetyt kirjastot: hetki, reagoi-natiivi, reagoi-natiivi-elementit.

Jos et tunne näitä resursseja, älä huoli - niitä on melko helppo käyttää.

Aiheet, joita käsittelemme postissa, ovat:

  • News API
  • Hae sovellusliittymä
  • FlatList
  • Vedä alas päivittääksesi
  • Linkittäminen

Ja enemmän ... joten aloitetaan!

Löydät projektirepon täältä

News API

Yksinkertainen ja helppokäyttöinen sovellusliittymä, joka palauttaa otsikoiden ja artikkeleiden JSON-metatiedot livenä tällä hetkellä kaikkialla verkossa. - NewsAPI.org

Ensinnäkin sinun pitäisi mennä eteenpäin ja rekisteröityä News Apiin saadaksesi ilmainen apiKey( todennusavaimesi ).

Luo uusi React Native -projekti ja kutsu sitä news_app(tai mitä haluat). Luo uusi kansio projektihakemistossa ja kutsu sitä src. Vuonna src hakemistoon, luoda kansion nimeä se components. Joten projektihakemistosi pitäisi näyttää tältä:

Vuonna src kansiossa, luo uusi tiedosto nimeltä news.js. Tästä tiedostosta haemme JSON: n, joka sisältää otsikot News API: sta.

news.js

Muista korvata YOUR_API_KEY_HERE omalla API-avaimellasi. Lisätietoja News API: sta on osoitteessanewsapi docs .

Nyt julistamme getNews funktion, joka noutaa artikkelit meille. Vie toiminto, jotta voimme käyttää sitä App.jstiedostossamme.

App.js

Konstruktorissa määritämme alkutilan. articles tallentaa artikkelimme hakemisen jälkeen ja refreshingauttaa meitä päivittämään animaatiota.Huomaa, että asetin refreshing boolin tosi, koska kun käynnistämme sovelluksen, haluamme animaation alkavan, kun lataamme artikkeleita (uutisotsikot).

componentDidMountkäynnistetään heti komponentin asennuksen jälkeen. Sen sisällä kutsumme fetchNewsmenetelmää.

componentDidMount() { this.fetchNews();}

Vuonna fetchNewskutsumme getNews()joka palauttaa lupaus. Joten käytämme .then()menetelmää, joka ottaa takaisinsoittofunktion, ja takaisinsoittofunktio ottaa argumentin ( artikkelit ).

Määritä nyt valtion artikkelit artikkeliargumentille. articlesKirjoitin vain, koska se on uusi ES6-syntaksia, mikä tarkoittaa { articles: articles }, ja asetimme refreshing väärään lopettamaan kehruuanimaation.

fetchNews() { getNews().then( articles => this.setState({ articles, refreshing: false }) ).catch(() => this.setState({ refreshing: false }));}

.catch()kutsutaan hylätyissä tapauksissa.

handleRefreshmethod käynnistää kehruuanimaation ja kutsuu fetchNews()menetelmää. Ohitamme () => this.fetchNews (), joten sitä kutsutaan heti kun tila on määritetty.

handleRefresh() { this.setState({ refreshing: true },() => this.fetchNews());}

Render-menetelmän sisällä palautamme FlatListkomponentin. Sitten ohitamme rekvisiitta. dataon joukko artikkeleita this.state. renderItemVie funktio tehdä kunkin kohteen array, mutta meidän tapauksessamme se vain palauttaa Articleosan toimme aikaisemmin (saamme siihen). Ja me välitämme artikkelin kohteen ehdotuksena käytettäväksi myöhemmin kyseisessä komponentissa.

Article.js

Vuonna src / komponentit luoda uuden JavaScript-tiedoston ja kutsua sitä Article.js

Aloitetaan asentamalla kaksi yksinkertaista kirjastoa npm: llä:reagoi-natiivi-elementteihin , mikä antaa meille jonkin verran valmiuttakomponentit, joita voisimme käyttää, ja hetki, joka käsittelee aikamme.

Asenna ne npm: llä:

npm install --save react-native-elements moment

Article.js: ssä:

Täällä tapahtuu paljon. Ensinnäkin aloitetaan tuhoamalla article rekvisiitta ja luokan alapuolella määriteltystyles esine .

Renderöintimenetelmän sisällä määritämme aikavakion artikkelin julkaisuhetken tallentamiseksi. Käytämme hetkikirjastoa muuntamaan päivämäärän siitä lähtien kuluneeksi ajaksi , ja kulumme publishedAttai aika tästä lähtien, jos publishedAton null.

defaultImg on määritetty kuvan URL, jos artikkelin kuvan URL-osoite on tyhjä.

Renderöintimenetelmä palaa TouchableNativeFeedbackkäsittelemään, kun käyttäjä painaa korttia. Annamme sille joitakin rekvisiitta:, useForgroundjoka käskee elementin käyttämään etualaa näytettäessä kortin aaltoileva vaikutus, ja onPressjoka ottaa toiminnon ja suorittaa sen, kun käyttäjä painaa korttia. Ohitimme () => Linking.openUrl(url), joka yksinkertaisesti avaa koko artikkelin URL-osoitteen, kun painamme korttia.

Kortilla on kolme rekvisiittaa:, featuredTitle joka on kuvan päälle sijoitettu otsikko, featuredTitleStyle tyylin luomiseksi ja imagemikä on artikkelin kuva artikkelin rekvisiitasta . Muuten, jos se on null, se tulee olemaan defaultImg.

.. featuredTitle={title} featuredTitleStyle={featuredTitleStyle} image={ defaultImg }..

Mitä tulee tekstielementtiin, siinä on artikkelin kuvaus.

{description}

Lisäsimme jakajan erottamaan kuvauksenaika ja lähteen nimi .

Alla Divideron a, Viewjoka sisältää lähteen nimen ja artikkelin julkaisuajan.

.. {source.name.toUpperCase()} {time}..

Sen jälkeen classmääriteltiin näiden komponenttien tyylit.

Nyt jos suoritamme sovelluksen:

Ole hyvä! Sovelluksen lähdekoodi on saatavana GitHubissa: TÄSTÄ, haasta se vapaasti.

Toivottavasti pidit artikkelistani! Jos sinulla on kysyttävää lainkaan, voit kommentoida tai ottaa yhteyttä minuun twitterissä ja autan ehdottomasti :)

? Osta minulle kahvia?

Seuraava tarina? Kuinka luoda natiivityöpöytäsovelluksia JavaScriptillä