Creating en ordbok App Bruke React Native for Android
34
Del
Del
Del
Denne Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Innledning
Facebooks React Native er en kraftig rammeverk som gjør at du raskt og enkelt bygge Android og iOS apps ved hjelp av bare Javascript og JSX. Apps bygget ved hjelp av React Native gjøre bruk av innfødte komponenter brukergrensesnitt og er dermed umulig å skille fra apps bygget direkte ved hjelp av SDK for Android og iOS.
Deres prestasjoner også er ikke så langt bak at av native apps, fordi nesten alle Javascript-kode kjøres i bakgrunnen på en innebygd forekomst av Javascript, samme Javascript-motoren som driver Apples Safari.
I denne opplæringen, jeg kommer til å hjelpe deg i gang med React Native for Android ved å vise deg hvordan å bygge en enkel engelsk-tysk ordbok app
Forutsetninger
Før du begynner, må du ha følgende installert på din datamaskin.
siste versjon av Android SDK og Android Support Library
den nyeste versjonen av Node.js
Fra september 2015 reagere Native støttes bare på OS X. Men med hjelp av noen skript, React Native v0.11.4 fungerer helt fint på Ubuntu 14.04.
1. Installere React Native
React Native er tilgjengelig som en Node.js pakke og kan raskt installeres ved hjelp av NPM, Node Package Manager.
NPM installere -g reagere-innfødte CLI
For å bruke Reagerer Native for å utvikle Android-apps, bør du sette verdien av en miljøvariabel kalt ANDROID_HOME til den absolutte banen til katalogen som inneholder Android SDK. Hvis du bruker bash shell, kan du sette den variable ved hjelp eksport.
Eksport ANDROID_HOME = /sti /til /Android /SDK
2. Opprette et nytt prosjekt
For å opprette en React Native prosjekt, bør du bruke React Native kommandolinje-grensesnitt eller CLI, som kan nås ved hjelp av reagerer opprinnelig kommando. Vi skaper en ordbok app i denne opplæringen så la oss kalle prosjektet ordbok.
Reagere-innfødte init Dictionary
Når kommandoen er ferdig, vil du ha en ny katalog som heter ordbok, som inneholder en startpakke React Native app. Tast inn den nye katalogen ved hjelp av cd.
Cd Dictionary
Før du går videre, foreslår jeg at du kjører starteren app for å sørge for at utviklingsmiljøet har alt React Native behov. For å gjøre dette, tast inn følgende kommando:
reagere opprinnelig run-android
Du vil nå finne en app som heter ordbok installert på emulator. Klikk på ikonet for å starte den. Hvis alt gikk bra, skal du se et skjermbilde som ser slik ut:
3. Klar Entry Point of Your App
Som standard er poenget med en React Native Android app entry en Javascript-fil som heter index.android.js. Når du har opprettet prosjektet ved hjelp av React Native er CLI, ble denne filen opprettet automatisk. Men det inneholder kode som tilhører starter appen. Du kan endre og bruke deler av denne koden for programmet, eller du kan bare slette alt og starte fra scratch. For denne opplæringen, foreslår jeg at du gjør det sistnevnte.
Når du har slettet innholdet i index.android.js, bruk krever å laste en modul kalt reagere-innfødt. Denne modulen inneholder all React Native funksjoner og objekter du trenger for å lage din app
Var React = krever ('reagere-innfødte');.
4. Opprette en React Component
React komponenter er Javascript-objekter som er ansvarlig for å gjengi og automatisk oppdatering av brukergrensesnittet til en React Native app. Faktisk er nesten alle brukergrensesnitt element av en React Native app en React komponent. Dette betyr at for å lage brukergrensesnittet i programmet ditt, må du lage dine egne React komponent. For å gjøre dette, bruker du createClass funksjon av React. Følgende kode oppretter en komponent kalt ordbok.
Var ordbok = React.createClass ({});
Du kan tenke på denne komponenten som den første skjermen på din app
Trinn 1: Definere Layout
React Native kaller automatisk gjengi funksjonen hver gang det er behov for å tegne eller oppdatere en komponent. Derfor må du legge denne funksjonen til komponenten. Inne i funksjonen, kan du definere oppsettet av komponenten ved hjelp JSX, en Javascript-syntaks utvidelse som lar deg enkelt blande XML-koder med Javascript-kode.
React Native tilbyr flere komponenter du kan bruke til å komponere oppsettet. For nå, vil vi være å bruke en React.View som en beholder, en React.Text å vise tekst, og en React.TextInput å godta brukerundersøkelser. Legg til følgende kode i komponenten:
gjengi: function () {var layout = < React.View style = {styles.parent} > < React.Text > Skriver noe på engelsk: < /React.Text> < React.TextInput /> < React.Text style = {styles.germanLabel} > Sin tyske tilsvarende er: < /React.Text> < React.Text style = {styles.germanWord} > < /React.Text> < /React.View>; returnere layout;}
Hvis du er kjent med HTML, kan du tenke på Vis som HTML div, tekst som en HTML span, og TextInput som en HTML-inngang element
Trinn 2. : Legge Styles
I ovennevnte kodebiten, flere komponenter har en stil attributt. Stilen attributt er ganske lik den HTML klassen attributtet. Men i stedet for å henvise til en CSS-klasse i et stilark, refererer det til en JSON objekt i en forekomst av React.StyleSheet.
For å opprette en React.StyleSheet objekt for din app, må du bruke React .StyleSheet.create funksjon. Som sin eneste argument, forventer det en JSON objekt som inneholder stiler av de enkelte komponentene. Her er stiler jeg brukte for vårt eksempel app:
Var stiler = React.StyleSheet.create ({//For beholderen Vis forelder: {padding: 16} //For Tekst etiketten germanLabel: {marginTop: 20 , fontWeight: 'fet'}, //For Tekst betydning germanWord: {marginTop: 15, fontstørrelse: 30, fontStyle: 'kursiv'}});
Trinn 3: Registrere Component
Å la React Native vet at det skal gjengi komponenten når programmet starter, må du registrere den med React.AppRegistry.registerComponent funksjonen. For å gjøre dette, legg til følgende kode på slutten av index.android.js:
React.AppRegistry.registerComponent ('Ordbok', () = > Dictionary);
Hvis du ikke er kjent med ES6 arrow funksjoner, kan du bare bruke følgende konvensjonell Javascript-kode i stedet:
React.AppRegistry.registerComponent ('Ordbok', function () {return ordbok;});
Hvis du vil, kan du nå laste inn app for å se den nye layouten. For å gjøre dette, trykker du på menyknappen på emulator, og klikk på Last JS.
4. Kontrollere State of the Component
Alle komponentene har en spesiell medlem variabel kalt staten, som er en JSON objekt. Det er spesielt, fordi så snart tilstanden til en komponent endringer, React Native automatisk gjen gjengir komponent for å reflektere endringen. Dette er en svært nyttig funksjon, og ved å bruke det riktig kan du gjøre unna med manuelt hente eller oppdatere innholdet på appens brukergrensesnitt-elementer.
La oss legge to nøkler, inngang og utgang, til ordbok komponentens tilstand. For å gjøre dette, må du bruke en funksjon som heter getInitialState. Returverdien av denne funksjonen blir tilstanden til komponent
getInitialState: function () {return {inngang: '', utgang: ''};}.
Du kan nå knytte TextInput med innspill og siste Tekst komponent med utgang. Når du har gjort det, bør oppsettet ser slik ut:
< React.View style = {styles.parent} > < React.Text > Skriver noe på engelsk: < /React.Text> < React.TextInput text = {this.state.input} /> < React.Text style = {styles.germanLabel} > Sin tyske tilsvarende er: < /React.Text> < React.Text style = {styles.germanWord} > {This.state.output} < /React.Text> < /React.View>
Som du kanskje har gjettet, vil inngangs inneholde det engelske ordet brukeren taster mens produksjonen vil inneholde sin tyske tilsvar
Selv om endringer i staten er automatisk skyves til brukeren. grensesnitt, er det motsatte ikke er sant. Dette betyr, vår komponent tilstand endrer ikke hvis brukeren angir noe inn i TextInput. Hvis du vil oppdatere staten manuelt, bør du bruke komponentens setState metode.
Hvis du vil sende verdien av TextInput til innspill, kan du legge til en onChangeText lytteren til TextInput og ringe til setState inni den. Bruke ES6 vil TextInput tag se slik ut:
< React.TextInput text = {this.state.input} onChangeText = {(e) = > this.setState ({inngang: e})} />
På dette punktet, noe brukeren skriver inn appens TextInput er umiddelbart tilgjengelig i inngang. Alt som gjenstår for oss å gjøre, er å kartlegge innspill til sitt tyske tilsvarende og oppdatering utgang. For å gjøre det, kan du bruke en ordbok som heter Mr. Honnings nybegynners ordbok (tysk-engelsk) av Winfried Honig. Last ned JSON tilsvarer ordlisten fra GitHub og legge den til i prosjektet.
For å laste ordboken inne index.android.js, bruk krever.
Var english_german = krever ('./english_german.json ');
Som english_german er noe mer enn en global JSON objekt hvor de engelske ordene er tastene og deres tyske ekvivalenter er verdier, alt du trenger å gjøre nå sjekke om innspill er tilgjengelig som en nøkkel, og hvis ja, kalle setState å tildele den tilhørende verdien til utgang. Koden for å gjøre det kunne se slik ut:
showMeaning: function () {//Bruk trefoldig operatøren å kontrollere om ordet //finnes i ordlisten. Var mening = this.state.input i english_german? english_german [this.state.input]: "Not Found"; //Oppdater staten this.setState ({utgang: betydningen});}
Du kan nå tilordne showMeaning til onSubmitEditing lytteren av TextInput slik at det kalles bare når brukeren er ferdig med å skrive
<.; React.TextInput onChangeText = {(e) = > this.setState ({inngang: e})} text = {this.state.input} onSubmitEditing = {this.showMeaning} />
Din ordboken app er klar. Du kan laste det og skriver i et engelsk ord for å umiddelbart se sin tyske oversettelse.
Konklusjon
I denne opplæringen, lært deg hvordan du installerer React Native og bruke den til å lage din første Android app , en engelsk-tysk ordbok, ved hjelp av bare Javascript og JSX. Mens du gjør det, lærte du hvordan du lager en egendefinert komponent, stilen den, og bruke sin tilstand til å kontrollere hva den viser.
Hvis du vil vite mer om React Native, kan du gå gjennom dokumentasjonen. Anmeldelser