I den første delen av denne serien lærte du hvordan du setter opp React Native på maskinen din, oppretter og bruker egendefinerte komponenter, og bruker tredjepartsbiblioteker, for eksempel moment.js. I denne veiledningen lærer du hvordan du gjør nettverksforespørsler ved hjelp av hente
, Gjør en nettside med den innebygde WebView
komponent, og kjør appen på en fysisk enhet.
I den første delen av denne serien brukte vi api
funksjon, men vi har ikke definert det ennå. Begynn med å opprette en src katalog og legg til en fil til den, api.js. Åpne filen og legg til følgende for det:
module.exports = funksjon (url) return fetch (url) .then (funksjon (respons) return response.json ();). deretter (funksjon (json) return json;);
Denne filen bruker hente
funksjon, som som standard er tilgjengelig i React Native. Denne funksjonen lar appen utføre nettverksforespørsler. Hvis du har brukt jQuery, er det ganske lik den $ .ajax
funksjon. Du angir en nettadresse og noen valgfrie data, og du får et svar tilbake.
Den eneste forskjellen er at du trenger å gjøre litt ekstra arbeid. Funksjonen for å fange det første løftet returnerer det raske svaret, noe som betyr at du må ringe json
metode på respons
for å få løftet som returnerer JSON-strengen. Så du må returnere resultatet av dette og fange løftet ved å ringe deretter
fungere igjen og passere i funksjonen som vil bli kalt når løftet løser.
JSON-strengen ville da bli sendt som et argument til denne funksjonen, slik at vi bare returnerte den. De hente
Metoden gir et løfte så når vi ringer til api
Metode, vi må fortsatt ringe deretter
metode for å fange den faktiske responsen, akkurat som vi gjorde i første del av denne serien.
api (story_url) .then ((story) => ...);
Nettside
KomponentDe Nettside
komponent er ansvarlig for å gjøre en nettside. Den bruker WebView
komponent for å gjøre det.
var React = krever ('react-native'); var AppRegistry, StyleSheet, Text, View, WebView = React; Var Button = krever ('reagere-innfødt-knapp'); var GiftedSpinner = krever ('reager-native-gifted-spinner'); var _ = krever (loddrett); var WebPage = React.createClass (getInitialState: function () return isLoading: true;, gjengi: funksjon () return (); , trunkate: funksjon (str) return _.truncate (str, 20); , onNavigationStateChange: funksjon (navState) if (! navState.loading) this.setState (isLoading: false, pageTitle: navState.title); , tilbake: funksjon () this.props.navigator.pop (); ); var styles = StyleSheet.create (container: flex: 1, webview_header: paddingLeft: 10, backgroundColor: '# FF6600', flex: 1, justifyContent: 'mellomrom', flexDirection: 'rad', header_item : paddingLeft: 10, paddingRight: 10, justifyContent: 'center', webview_body: flex: 9, knapp: textAlign: 'left', farge: '#FFF', page_title: color: '#FFF ', spinner: alignItems:' flex-end '); module.exports = WebPage; This.truncate (this.state.pageTitle) this.state.isLading &&
Først gjør vi litt housekeeping ved å skape de variablene vi trenger og krever biblioteker vi skal bruke.
var React = krever ('react-native'); var AppRegistry, StyleSheet, Text, View, WebView = React; Var Button = krever ('reagere-innfødt-knapp'); var GiftedSpinner = krever ('reager-native-gifted-spinner'); var _ = krever (loddrett);
Deretter lager vi Nettside
komponent.
var WebPage = React.createClass (...);
Vi setter isLoading
til ekte
som standardstatus. Denne egenskapen er ansvarlig for å avgjøre om spinneren skal vises eller ej. Som standard bør spinneren være synlig for å indikere at siden lastes inn.
getInitialState: funksjon () return isLoading: true; ,
Deretter gir vi komponenten. Som nyhetskomponenten har denne også en header og en kropp. Overskriften inneholder en tilbakeknapp, tittel på siden og en spinner.
gjengi: funksjon () retur (); , This.truncate (this.state.pageTitle) this.state.isLading &&
Kroppen inneholder WebView
komponent. De WebView
komponenten har a url
og onNavigationStateChange
egenskaper. De url
er nettadressen som ble sendt fra viewPage
fungere i NewsItems
komponent tidligere. Så når følgende kode er utført:
this.props.navigator.push (navn: 'web_page', url: url);
De renderScene
metode i index.android.js blir også utført og nettadressen er sendt til den:
renderScene: funksjon (rute, navigator) var Component = ROUTES [rute.name]; komme tilbake (); ,
Slik har vi tilgang til nettadressen ved å trekke den ut av rekvisitter: this.props.url
.
La oss gå tilbake til attributter lagt til WebView
komponent. Vi har onNavigationStateChange
attributt, som brukes til å spesifisere funksjonen som skal utføres når nettvisningen går til en ny side. Dette er hva denne funksjonen ser ut som:
onNavigationStateChange: funksjon (navState) if (! navState.loading) this.setState (isLoading: false, pageTitle: navState.title); ,
Når ovennevnte funksjon kalles, vil navState
blir sendt videre som et argument. Dette inneholder informasjon om den aktuelle tilstanden til nettvisningen, for eksempel tittelen på siden, og om den for øyeblikket lastes inn eller ej. Dette er det perfekte stedet for å oppdatere staten. Når siden ikke lastes inn, setter vi inn isLoading
til falsk
og sett en verdi for side tittel
.
Deretter har vi tilbake
funksjon, som gjør navigatoren gå tilbake en side. Dette kalles når brukeren tapper tilbake-knappen i overskriften.
tilbake: funksjon () this.props.navigator.pop ();
De avkorte
Funksjonen begrenser lengden på hva som passerer inn i funksjonen. Vi bruker denne funksjonen til å begrense teksten til nettsiden til nettsiden.
trunkate: funksjon (str) return _.truncate (str, 20); ,
Stilarket ser slik ut:
var styles = StyleSheet.create (container: flex: 1, webview_header: paddingLeft: 10, backgroundColor: '# FF6600', flex: 1, justifyContent: 'mellomrom', flexDirection: 'rad', header_item : paddingLeft: 10, paddingRight: 10, justifyContent: 'center', webview_body: flex: 9, knapp: textAlign: 'left', farge: '#FFF', page_title: color: '#FFF ', spinner: alignItems:' flex-end ');
Til slutt, avslør komponenten til omverdenen:
module.exports = WebPage;
For å kjøre appen trenger du en Android-enhet eller en emulator. Hvis du vil bruke en emulator, anbefaler jeg at du bruker Genymotion. Du kan kjøre appen ved å utføre følgende kommando:
reager-native run-android
Denne kommandoen installerer og lanserer appen. Men du får følgende feil hvis du prøver å gjøre det:
Dette skyldes at React Native forventer at React-serveren skal kjøres på maskinen din. React-serveren samler appen hver gang du lagrer endringene i teksteditoren din. De reager-native run-android
Kommandoen brukes bare til å kjøre appen med det formål å teste og feilsøke appen. Det er derfor det er avhengig av React-serveren for å faktisk kompilere appen.
For å kvitte seg med feilen, må du kjøre Reager-native start
kommandoen for å starte serveren. Dette tar en stund på første løp, men når det kommer til den delen der det står følgende:
Building Dependency Graph (35135ms)
Du kan åpne et nytt terminalvindu i prosjektkatalogen og utføre adb shell input keyevent 82
. Dette åpner utviklermenyen i enheten eller emulatoren. Når menyen er åpnet, velger du dev innstillinger velg deretter feilsøk server vert og port.
Dette åpner en melding som ber deg om å skrive inn ip-adressen og porten til datamaskinen din. Finn ut den interne IP-adressen til datamaskinen din og skriv den inn i spørringen sammen med porten 8081, som er standardporten som React server kjører. Med andre ord, hvis din IP-adresse er 192.168.254.254, og skriv deretter inn 192.168.254.254:8081.
Deretter går du tilbake til utviklermenyen og velger Oppdater JS. Dette oppdaterer appen, slik at den oppdager den kjørende React server-forekomsten. Appen skal hvordan det fungerer uten problemer.
Hvis du vil teste på en iOS-enhet, følger du veiledningen på React Native-nettstedet.
Vi har bygget en ganske fin nyhetsleserapp med React Native. Hva blir det neste? Her er noen ideer hvis du vil lære mer om React Native:
Det er det. I denne opplæringen lærte du hvordan du arbeider med React Native for å lage en nyhetsleser-app som snakker til Hacker News API. Hvis du har noen spørsmål, slipp dem i kommentarene nedenfor, og jeg vil prøve mitt beste for å svare på dem. Du finner kildefilene til denne opplæringen på GitHub. Takk for at du leste.