Come creare un lettore di notizie con React Native componente della pagina Web

Nella prima parte di questa serie, hai imparato come configurare React Native sul tuo computer, creare e utilizzare componenti personalizzati e utilizzare librerie di terze parti, come moment.js. In questo tutorial, si impara come fare richieste di rete usando andare a prendere, rendere una pagina web usando il built-in WebView componente, ed eseguire l'app su un dispositivo fisico.

1. Recupera API Wrapper

Nella prima parte di questa serie, abbiamo usato il api funzione, ma non l'abbiamo ancora definita. Inizia creando un src directory e aggiungere un file ad esso, api.js. Apri il file e aggiungi il seguente:

module.exports = function (url) return fetch (url) .then (function (response) return response.json ();). then (function (json) return json;);

Questo file usa il andare a prendere funzione, che è di default disponibile in React Native. Questa funzione consente all'app di eseguire richieste di rete. Se hai usato jQuery, è molto simile al $ .ajax funzione. Si specifica un URL e alcuni dati opzionali e si ottiene una risposta.

L'unica differenza è che devi fare un po 'di lavoro extra. La funzione per acquisire la prima promessa restituisce la risposta non elaborata, il che significa che devi chiamare il jSON metodo sul risposta per ottenere la promessa che restituisce la stringa JSON. Quindi devi restituire il risultato e acquisire la promessa chiamando il poi funzione ancora una volta e passare la funzione che verrà chiamata una volta che la promessa si risolve.

La stringa JSON sarebbe quindi passata come argomento a questa funzione, quindi la restituiamo. Il andare a prendere metodo restituisce una promessa quindi quando chiamiamo il api metodo, dobbiamo ancora chiamare il poi metodo per catturare la risposta effettiva, proprio come abbiamo fatto nella prima parte di questa serie.

api (story_url) .then ((story) => ...);

2. `Pagina web` Componente

Il Pagina web componente è responsabile del rendering di una pagina web. Usa il WebView componente per farlo.

var React = require ('react-native'); var AppRegistry, StyleSheet, Text, View, WebView = React; var Button = require ('react-native-button'); var GiftedSpinner = require ('react-native-gifted-spinner'); var _ = require ('lodash'); var WebPage = React.createClass (getInitialState: function () return isLoading: true;, render: function () return (      This.truncate (this.state.pageTitle)   this.state.isLoading &&        ); , truncate: function (str) return _.truncate (str, 20); , onNavigationStateChange: function (navState) if (! navState.loading) this.setState (isLoading: false, pageTitle: navState.title); , back: function () this.props.navigator.pop (); ); var styles = StyleSheet.create (container: flex: 1, webview_header: paddingLeft: 10, backgroundColor: '# FF6600', flex: 1, justifyContent: 'space-between', flexDirection: 'row', header_item : paddingLeft: 10, paddingRight: 10, justifyContent: 'center', webview_body: flex: 9, pulsante: textAlign: 'left', color: '#FFF', page_title: color: '#FFF ', spinner: alignItems:' flex-end '); module.exports = WebPage;

In primo luogo, facciamo delle pulizie creando le variabili che ci servono e richiedendo le librerie che useremo.

var React = require ('react-native'); var AppRegistry, StyleSheet, Text, View, WebView = React; var Button = require ('react-native-button'); var GiftedSpinner = require ('react-native-gifted-spinner'); var _ = require ('lodash');

Successivamente, creiamo il Pagina web componente.

var WebPage = React.createClass (...);

Prepariamo IsLoading a vero come stato predefinito. Questa proprietà è responsabile per determinare se mostrare o meno lo spinner. Per impostazione predefinita, lo spinner dovrebbe essere visibile per indicare che la pagina si sta caricando.

getInitialState: function () return isLoading: true; ,

Successivamente, rendiamo il componente. Come il componente degli articoli di notizie, anche questo ha un'intestazione e un corpo. L'intestazione contiene un pulsante indietro, il titolo della pagina e uno spinner.

render: function () return (      This.truncate (this.state.pageTitle)   this.state.isLoading &&        ); ,

Il corpo contiene il WebView componente. Il WebView il componente ha a url e onNavigationStateChange attributi. Il url è l'URL che è stato passato dal ViewPage funzione nel NewsItems componente precedente. Quindi quando viene eseguito il seguente codice:

this.props.navigator.push (name: 'web_page', url: url);

Il renderScene metodo in index.android.js viene eseguito anche e l'URL viene passato ad esso:

renderScene: function (route, navigator) var Component = ROUTES [route.name]; ritorno (  ); ,

È così che abbiamo accesso all'URL estraendolo dagli oggetti di scena: this.props.url.

Torniamo agli attributi aggiunti al WebView componente. Abbiamo il onNavigationStateChange attributo, che viene utilizzato per specificare la funzione da eseguire ogni volta che la visualizzazione Web passa a una nuova pagina. Ecco come appare questa funzione:

onNavigationStateChange: function (navState) if (! navState.loading) this.setState (isLoading: false, pageTitle: navState.title); ,

Quando viene chiamata la funzione sopra, il navState viene passato come argomento. Questo contiene informazioni sullo stato corrente della vista Web, come il titolo della pagina e se sta caricando o meno attualmente. Questo è il posto perfetto per aggiornare lo stato. Quando la pagina non si carica più, abbiamo impostato IsLoading a falso e impostare un valore per il titolo della pagina.

Successivamente, abbiamo il indietro funzione, che fa tornare indietro il navigatore di una pagina. Questo viene chiamato ogni volta che l'utente tocca il pulsante indietro nell'intestazione.

back: function () this.props.navigator.pop ();

Il troncare la funzione limita la lunghezza di tutto ciò che è passato nella funzione. Usiamo questa funzione per limitare il testo per il titolo della pagina della pagina web.

truncate: function (str) return _.truncate (str, 20); ,

Il foglio di stile è simile al seguente:

var styles = StyleSheet.create (container: flex: 1, webview_header: paddingLeft: 10, backgroundColor: '# FF6600', flex: 1, justifyContent: 'space-between', flexDirection: 'row', header_item : paddingLeft: 10, paddingRight: 10, justifyContent: 'center', webview_body: flex: 9, pulsante: textAlign: 'left', color: '#FFF', page_title: color: '#FFF ', spinner: alignItems:' flex-end ');

Infine, esporre il componente al mondo esterno:

module.exports = WebPage;

3. Esecuzione dell'applicazione

Per eseguire l'app, è necessario un dispositivo Android o un emulatore. Se si desidera utilizzare un emulatore, si consiglia di utilizzare Genymotion. Puoi eseguire l'app eseguendo il seguente comando:

react-native run-android

Questo comando installa e avvia l'app. Ma avrai il seguente errore se proverai a farlo:

Questo perché React Native si aspetta che il server React sia in esecuzione sulla macchina. Il server React compila l'app ogni volta che salvi le modifiche nel tuo editor di testo. Il react-native run-android il comando viene utilizzato solo per eseguire l'app allo scopo di testare e eseguire il debug dell'applicazione. Ecco perché dipende dal server React per la compilazione effettiva dell'app.

Per eliminare l'errore, è necessario eseguire il inizio reattivo comando per avviare il server. Questo richiede un po 'di tempo durante la prima esecuzione, ma quando arriva alla parte in cui si dice quanto segue:

 Grafico di dipendenza dell'edificio (35135 ms)

È possibile aprire una nuova finestra di terminale nella directory del progetto ed eseguirla adb shell input keyevent 82. Questo apre il menu dello sviluppatore nel dispositivo o nell'emulatore. Una volta aperto il menu, selezionare impostazioni di sviluppo quindi selezionare host e porta di debug del server.

Questo apre una richiesta che ti chiede di inserire l'indirizzo IP e la porta del tuo computer. Scopri l'indirizzo IP interno del tuo computer e inseriscilo nel prompt insieme alla porta 8081, che è la porta predefinita su cui viene eseguito il server React. In altre parole, se il tuo indirizzo IP è 192.168.254.254, quindi entra 192.168.254.254:8081.

Dopodiché, torna al menu degli sviluppatori e seleziona ricarica JS. Questo ricarica l'app in modo che rilevi l'istanza del server React in esecuzione. L'app dovrebbe come funzionare senza problemi.

Se si desidera eseguire il test su un dispositivo iOS, seguire la guida sul sito Web di React Native.

4. Passi successivi

Abbiamo creato un'applicazione di news reader piuttosto carina con React Native. Qual'è il prossimo? Ecco alcune idee se vuoi saperne di più su React Native:

Migliora il codice interrompendo l'app in alcuni componenti più riutilizzabili. Inizia guardando il codice duplicato. Ad esempio, nell'app che abbiamo creato, abbiamo duplicato l'intestazione e i componenti al suo interno. Quello che puoi fare è creare un componente di intestazione che accetti il titolo come proprietà e poi lo richieda su ogni pagina in cui hai bisogno di un'intestazione.
Migliora i tempi di risposta dell'app creando un server che memorizza nella cache gli elementi dall'API di Hacker News. Ciò consente di eseguire solo una richiesta di rete che contiene tutte le notizie invece di dover eseguire più richieste di rete come abbiamo fatto in questo tutorial.
Genera un APK firmato in modo da poter distribuire l'app su Google Play. Per iOS, puoi usare Xcode per distribuire la tua app all'App Store di Apple.
Esplora la documentazione per le API che accedono alle funzionalità dei dispositivi nativi, come la fotocamera.
Dai un'occhiata al repository Awesome React Native su Github. Questo repository contiene un elenco di componenti, risorse e strumenti che è possibile utilizzare con React Native.
Se vuoi tenerti aggiornato con le notizie su React Native, allora iscriviti alla newsletter di React Native.

Conclusione

Questo è tutto. In questo tutorial, hai imparato come lavorare con React Native per creare un'app di news reader che comunichi con l'API di Hacker News. Se avete domande, lasciatele nei commenti qui sotto e farò del mio meglio per risponderle. Puoi trovare i file sorgente di questo tutorial su GitHub. Grazie per aver letto.

Codice