Come creare un'app di notizie con React Native

Per il mio primo post su Medium, e volevo condividere con voi come ho creato un'app di notizie con React Native.

Originariamente pubblicato sul mio blog.

Requisiti per la creazione dell'app:

  • Una conoscenza di base di JavaScriptlingua .
  • Installa: Node.js, reagisci in modo nativo usando npm.
  • Librerie utilizzate: elementi momento, reagire-nativi, reagire-nativi.

Se non hai familiarità con queste risorse, non preoccuparti: sono abbastanza facili da usare.

Gli argomenti che tratteremo nel post sono:

  • API di notizie
  • Fetch API
  • FlatList
  • Trascina verso il basso per aggiornare
  • Collegamento

E altro ancora ... quindi iniziamo!

Puoi trovare il repository del progetto qui

API di notizie

Un'API semplice e facile da usare che restituisce metadati JSON per titoli e articoli in diretta in tutto il Web in questo momento. - NewsAPI.org

Innanzitutto, dovresti andare avanti e iscriverti a News Api per ottenere gratuitamente apiKey(la tua chiave di autenticazione ).

Crea un nuovo progetto React Native e chiamalo news_app(o come vuoi). Nella directory del progetto, crea una nuova cartella e chiamala src. Nella src directory, crea una cartella e nominala components. Quindi la directory del tuo progetto dovrebbe essere simile a questa:

Nella src cartella, crea un nuovo file chiamato news.js. In questo file andremo a recuperare il JSON che contiene i titoli dall'API News.

news.js

Assicurati di sostituire YOUR_API_KEY_HERE con la tua chiave API. Per ulteriori informazioni sull'API di notizie, vai anewsapi docs .

Ora dichiariamo la getNews funzione, che recupererà gli articoli per noi. Esporta la funzione in modo che possiamo usarla nel nostro App.jsfile.

App.js

Nel costruttore definiamo lo stato iniziale. articles memorizzerà i nostri articoli dopo che li avremo recuperati e refreshingci aiuterà ad aggiornare l'animazione.Si noti che ho impostato il valore refreshing bool su true, perché quando avviamo l'app, vogliamo che l'animazione inizi mentre carichiamo gli articoli (titoli delle notizie).

componentDidMountviene richiamato immediatamente dopo il montaggio di un componente. Al suo interno chiamiamo il fetchNewsmetodo.

componentDidMount() { this.fetchNews();}

In fetchNewsnoi chiamiamo getNews()che restituisce una promessa. Quindi usiamo il .then()metodo che accetta una funzione di callback e la funzione di callback accetta un argomento ( gli articoli ).

Ora assegna gli articoli nello stato all'argomento articoli. Ho digitato solo articlesperché si tratta di una nuova sintassi ES6 che significa { articles: articles }, e abbiamo impostato refreshing su false per fermare l'animazione dello spinner.

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

.catch()viene chiamato nei casi respinti.

handleRefreshil metodo avvierà l'animazione dello spinner e chiamerà il fetchNews()metodo. Passiamo () => this.fetchNews (), quindi viene chiamato immediatamente dopo aver assegnato lo stato.

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

All'interno del metodo render, restituiamo un FlatListcomponente. Quindi passiamo alcuni oggetti di scena. dataè la serie di articoli da this.state. La renderItemprende una funzione di rendere ogni elemento dell'array, ma nel nostro caso solo restituisce la Articlecomponente abbiamo importato in precedenza (ci arriveremo ad esso). E passiamo l'articolo articolo come sostegno da utilizzare in seguito in quel componente.

Articolo.js

In src / components crea un nuovo file JavaScript e chiamalo Article.js

Cominciamo installando due semplici librerie usando npm:reagire-elementi-nativi , che ci dà alcuni preconfezionaticomponenti che potremmo usare e momento che gestirà il nostro tempo.

Installali usando npm:

npm install --save react-native-elements moment

In Article.js:

C'è molto da fare qui. Per prima cosa, iniziamo destrutturando il article sostegno e l' styles oggetto definito sotto la classe .

All'interno del metodo render, definiamo la costante di tempo per memorizzare l'ora in cui l'articolo è stato pubblicato. Usiamo la libreria dei momenti per convertire la data nel tempo trascorso da allora , e passiamo publishedAto il tempo da adesso se lo publishedAtè null.

defaultImg viene assegnato un URL immagine nel caso in cui l'URL dell'immagine dell'articolo sia nullo.

Il metodo render torna TouchableNativeFeedbacka gestire quando l'utente preme la carta. Gli passiamo alcuni props:, useForgroundche dice all'elemento di usare il primo piano quando mostra l'effetto a catena sulla carta, e onPress, che prende una funzione e la esegue quando l'utente preme la carta. Abbiamo passato () => Linking.openUrl(url), che aprirà semplicemente l'URL dell'articolo completo quando premiamo la scheda.

La scheda richiede tre oggetti di scena:, featuredTitle che è un titolo posizionato sull'immagine, featuredTitleStyle per modellarla e imageche è l'immagine dell'articolo dall'oggetto di scena . Altrimenti, se nullè, sarà il file defaultImg.

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

Per quanto riguarda l'elemento di testo, conterrà la descrizione dell'articolo.

{description}

Abbiamo aggiunto un divisore da cui separare la descrizionetime and source name.

Below the Divider , we have a View that contains the source name and the time the article was published.

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

After the class, we defined the styles for these components.

Now if we run the app:

There you go! The source code for the app is available on GitHub: HERE, feel free to fork it.

I hope you enjoyed my article! If you have any questions at all, feel free to comment or reach me on twitter and I will definitely help :)

?Buy me a coffee?

Next Story ?How to build native desktop apps with JavaScript