Hoe maak je een nieuwslezer met React Native Web Page Component

In het eerste deel van deze serie hebt u geleerd hoe u React Native op uw computer kunt instellen, aangepaste componenten kunt maken en gebruiken en bibliotheken van derden kunt gebruiken, zoals moment.js. In deze zelfstudie leert u hoe u netwerkverzoeken kunt doen met halen, render een webpagina met behulp van de ingebouwde WebView component en voer de app uit op een fysiek apparaat.

1. Fetch API Wrapper

In het eerste deel van deze serie gebruikten we de api functie, maar we hebben het nog niet gedefinieerd. Begin met het maken van een src map en voeg er een bestand aan toe, api.js. Open het bestand en voeg het volgende toe:

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

Dit bestand gebruikt de halen functie, die standaard beschikbaar is in React Native. Met deze functie kan de app netwerkverzoeken uitvoeren. Als je jQuery hebt gebruikt, is het vergelijkbaar met de $ .ajax functie. U geeft een URL en enkele optionele gegevens op en u krijgt een reactie terug.

Het enige verschil is dat je een beetje extra werk moet doen. De functie voor het vastleggen van de eerste belofte retourneert de onbewerkte reactie, wat betekent dat u de json methode op de antwoord om de belofte te krijgen die de JSON-reeks retourneert. Dus je moet het resultaat hiervan teruggeven en de belofte waarmaken door het dan opnieuw functioneren en de functie doorgeven die wordt opgeroepen zodra de belofte is opgelost.

De JSON-reeks zou dan als argument voor deze functie worden doorgegeven, dus we geven hem gewoon terug. De halen methode geeft een belofte terug, dus wanneer we de api methode, we moeten nog steeds de dan methode om de daadwerkelijke respons vast te leggen, net als in het eerste deel van deze serie.

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

2. `Webpagina` bestanddeel

De Webpagina component is verantwoordelijk voor het renderen van een webpagina. Het gebruikt de WebView component om dit te doen.

var React = require ('react-native'); var AppRegistry, StyleSheet, Text, View, WebView = Reageren; var Button = require ('react-native-knop'); var GiftedSpinner = require ('react-native-begaafd-spinner'); var _ = vereisen ('lodash'); var WebPage = React.createClass (getInitialState: function () return isLoading: true;, render: function () retourneren (      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); , terug: 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, button: textAlign: 'left', color: '#FFF', page_title: color: '#FFF ', spinner: alignItems:' flex-end '); module.exports = WebPage;

Ten eerste doen we huishoudingen door de variabelen te maken die we nodig hebben en de bibliotheken die we zullen gebruiken te eisen.

var React = require ('react-native'); var AppRegistry, StyleSheet, Text, View, WebView = Reageren; var Button = require ('react-native-knop'); var GiftedSpinner = require ('react-native-begaafd-spinner'); var _ = vereisen ('lodash');

Vervolgens maken we de Webpagina bestanddeel.

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

We gaan zitten Laadt naar waar als de standaardstatus. Deze eigenschap is verantwoordelijk voor het bepalen of de spinner al dan niet wordt weergegeven. Standaard moet de draaifunctie zichtbaar zijn om aan te geven dat de pagina wordt geladen.

getInitialState: function () return isLoading: true; ,

Vervolgens geven we de component weer. Net als de nieuwsitemcomponent heeft deze ook een koptekst en een hoofdtekst. De koptekst bevat een terugknop, de titel van de pagina en een draaifunctie.

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

Het lichaam bevat de WebView component. De WebView component heeft een url en onNavigationStateChange attributen. De url is de URL die is doorgegeven van de Bekijk pagina functie in de Nieuwsberichten component eerder. Dus als de volgende code wordt uitgevoerd:

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

De renderScene methode in index.android.js wordt ook uitgevoerd en de URL wordt hieraan doorgegeven:

renderScene: functie (route, navigator) var Component = ROUTES [route.naam]; terugkeer (  ); ,

Dat is hoe we toegang hebben tot de URL door deze uit de rekwisieten te halen: this.props.url.

Laten we teruggaan naar de attributen die zijn toegevoegd aan de WebView component. We hebben de onNavigationStateChange attribuut, dat wordt gebruikt voor het opgeven van de uit te voeren functie wanneer de webweergave naar een nieuwe pagina navigeert. Zo ziet die functie eruit:

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

Wanneer de bovenstaande functie wordt aangeroepen, wordt de navState wordt doorgegeven als een argument. Dit bevat informatie over de huidige status van de webweergave, zoals de titel van de pagina en of deze al dan niet wordt geladen. Dit is de perfecte plaats om de staat bij te werken. Wanneer de pagina niet meer wordt geladen, stellen we in Laadt naar vals en stel een waarde in voor pagina titel.

Vervolgens hebben we de terug functie, waardoor de navigator één pagina teruggaat. Dit wordt aangeroepen wanneer de gebruiker op de knop Terug in de kop tikt.

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

De afknotten functie beperkt de lengte van wat in de functie wordt doorgegeven. We gebruiken deze functie om de tekst voor de paginatitel van de webpagina te beperken.

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

Het stylesheet ziet er als volgt uit:

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, button: textAlign: 'left', color: '#FFF', page_title: color: '#FFF ', spinner: alignItems:' flex-end ');

Stel ten slotte het onderdeel bloot aan de buitenwereld:

module.exports = WebPage;

3. De app gebruiken

Om de app uit te voeren, hebt u een Android-apparaat of een emulator nodig. Als u een emulator wilt gebruiken, raad ik aan Genymotion te gebruiken. U kunt de app uitvoeren door de volgende opdracht uit te voeren:

react-native run-android

Met deze opdracht wordt de app geïnstalleerd en gestart. Maar u krijgt de volgende foutmelding als u dat probeert:

Dit komt omdat React Native verwacht dat de React-server actief is op uw computer. De React-server compileert de app telkens wanneer u de wijzigingen opslaat in uw teksteditor. De react-native run-android opdracht wordt alleen gebruikt voor het uitvoeren van de app om de app te testen en te debuggen. Dat is waarom het afhankelijk is van de React-server voor het daadwerkelijk compileren van de app.

Om de fout te verwijderen, moet u de react native start opdracht om de server te starten. Dit duurt een tijdje bij de eerste run, maar als het bij het gedeelte komt waar het het volgende zegt:

 Bouwafhankelijkheidsgrafiek (35135ms)

U kunt een nieuw terminalvenster in uw projectdirectory openen en uitvoeren adb shell input keyevent 82. Hiermee wordt het ontwikkelaarsmenu geopend in het apparaat of de emulator. Selecteer als het menu is geopend dev instellingen selecteer vervolgens foutopsporing serverhost & poort.

Hiermee wordt een prompt geopend waarin u wordt gevraagd om het IP-adres en de poort van uw computer in te voeren. Ontdek het interne IP-adres van uw computer en voer dit samen met de poort in bij de prompt 8081, Dit is de standaardpoort waarop de React-server wordt uitgevoerd. Met andere woorden, als uw IP-adres dat is 192.168.254.254, ga dan naar binnen 192.168.254.254:8081.

Ga daarna terug naar het ontwikkelaarsmenu en selecteer laad JS opnieuw. Hierdoor wordt de app opnieuw geladen, zodat deze de actieve instantie React-server detecteert. De app zou moeten werken zonder problemen.

Als u wilt testen op een iOS-apparaat, volgt u de gids op de website React Native.

4. Volgende stappen

We hebben een mooie nette nieuwslezer-app gebouwd met React Native. Wat is het volgende? Hier zijn een paar ideeën als u meer wilt weten over React Native:

Verbeter de code door de app te splitsen in een paar meer herbruikbare componenten. Begin met het bekijken van gedupliceerde code. In de app die we hebben gemaakt, hebben we bijvoorbeeld de header en de componenten erin gekopieerd. Wat u kunt doen, is een headercomponent maken die de titel als eigenschap accepteert en deze vervolgens op elke pagina vereist waar u een header nodig hebt.
Verbeter de responstijd van de app door een server te maken die de items uit de Hacker News-API in de cache opslaat. Hiermee kunt u slechts één netwerkaanvraag uitvoeren die alle nieuwsitems bevat in plaats van dat u meerdere netwerkverzoeken moet uitvoeren, zoals we in deze zelfstudie hebben gedaan.
Genereer een ondertekende APK, zodat u de app kunt distribueren op Google Play. Voor iOS kunt u Xcode gebruiken om uw app te distribueren naar de App Store van Apple.
Verken de documentatie voor API's die toegang hebben tot systeemeigen apparaatmogelijkheden, zoals de camera.
Bekijk de originele repo van Awesome React op Github. Die repo bevat een lijst met componenten, bronnen en hulpmiddelen die u kunt gebruiken met React Native.
Als je jezelf op de hoogte wilt houden van nieuws over React Native, abonneer je dan op de React Native Nieuwsbrief.

Conclusie

Dat is het. In deze zelfstudie hebt u geleerd hoe u met React Native kunt werken om een nieuwslezer-app te maken die praat met de Hacker News-API. Als u vragen heeft, kunt u deze in de onderstaande opmerkingen plaatsen en ik zal mijn best doen om ze te beantwoorden. Je kunt de bronbestanden van deze tutorial op GitHub vinden. Bedankt voor het lezen.

Code