Veidojiet vietējo mobilo lietotni, izmantojot React Native

Saturs

• Darba sākšana
• Konstantu deklarēšana
• Informācija par laika apstākļiem
• Ikonu pievienošana
• Datu pievienošana

Vietējo mobilo lietotņu izstrāde ir sarežģīta vide. Pastāv dažādas operētājsistēmas, plašs klausules ražotāju klāsts un milzīgs ekrāna izšķirtspējas klāsts, lai izveidotu. Par laimi, Facebook ir izlaidis React Native - sistēmu, kas paredzēta, lai paplašinātu React pieeju mobilo lietojumprogrammu izstrādei.

Šajā apmācībā mēs izveidosim reāllaika laika lietojumprogrammu, izmantojot OpenWeatherMap bezmaksas API. Es apskatīšu darbu ar React Native komponentiem, attēliem un stiliem, kā arī JSON datu ielādi un parsēšanu.

Darba sākšana

Vispirms lejupielādējiet avota failus no GitHub. Jūs atradīsit mapi “source-imagery”, kurā ir apmācības attēli, mapi “article-steps”, kurā ir katras darbības avota kods (plus komentāri), un mapi “complete-project”, kurā būs galīgais avota projekts.

Jums būs nepieciešams Xcode, lai apkopotu iOS lietotnes (pieejams App Store) un Homebrew OSX pakotņu pārvaldnieku. Kad esat instalējis Homebrew, varat atvērt termināļa logu un palaist šādas komandas (ja jums ir problēmas, šeit ir ceļvedis):

• brūvēt instalēšanas mezglu, lai instalētu Node.js
• brūvēt instalēt sargs instalēt Watchman, failu skatīšanas pakalpojumu
• brūvēšanas instalēšanas plūsma, statiskā datu tipa pārbaudītājs
• npm install -g reaģēt-native-cli, lai instalētu React Native

Projektu var izveidot, ierakstot reaģēšanas vietējo init weatherapp. Pierakstiet projekta mapi un atveriet to, lai redzētu React Native noklusējuma mapju struktūru. IOS direktorijā atrodas iOS platformas projekta faili. Šajā brīdī mūs interesējošais fails ir ‘index.ios.js’. Atveriet to izvēlētajā redaktorā.

Apskatīsim mapju struktūru:

• 8. – 11. Rindā ir React nepieciešama šai lietotnes sastāvdaļai
• 15-32. Rindā tiek deklarēta noklusējuma klase weatherapp un tā renderēšanas metodēm
• 34. – 51. Rindā ir definēti lietotnē izmantotie stili
• 53. rinda ir šī komponenta eksporta nosaukums

Pirmais, kas mums jādara, ir sagatavot tukšu audeklu. Mainiet renderēšanas metodi uz:

renderēt: function () {return (Skata stils = {[stili.konteiners, {fonaKrāsa: šī.valsts.kultūras krāsa]]}> / Skats>); }

Tas izveido tukšu skatu, izmantojot stilu masīvu - konteinera stilu un stāvokļa mainīgo, ko sauc par backgroundColor. Kad mēs vaicāsim datus par laika apstākļu API, mainīsim mainīgo backgroundColor, pamatojoties uz pašreizējo temperatūru. Mēs varam arī iestatīt konteinera stilu, lai centrēšanai izmantotu flex: 1.

konteiners: {flex: 1},

Tagad mēs izmantosim React metodi getInitialState. Tas tiek automātiski izsaukts jebkuram komponentam, kad tiek palaista lietotne. Mēs to izmantosim, lai deklarētu stāvokļa mainīgos, kas tiek izmantoti vēlāk. Pievienojiet to virs renderēšanas metodes WeatherApp klasē:

getInitialState: function () {return {weatherData: null, backgroundColor: "#FFFFFF"}; },

Tagad ir ideāls laiks, lai pārietu uz Xcode un nospēlētu simulatorā, lai redzētu jūsu lietojumprogrammu. Viena no React Native fantastiskajām īpašībām ir tā kompilēšanas ātrums. Rediģējiet #FFFFFF citā krāsā un nospiediet taustiņu cmd + R, lai redzētu gandrīz tūlītēju pārlādēšanu - diezgan veikls!

Konstantu deklarēšana

Deklarēsim konstantes, kas tiek izmantotas fona krāsām, un vēl vienu - vietnei URL openweathermap.org, kas nodrošina laika apstākļu datus. Pievienojiet sekojošo zem React required:

var BG_HOT = "# fb9f4d"; var BG_WARM = "# fbd84d"; var BG_COLD = "# 00abe6"; var REQUEST_URL = "http://api.openweathermap.org/data/2.5/weather?units=metric&";

Mums būs jāizmanto arī cita no React iebūvētajām metodēm - komponentDidMount. Tas tiek automātiski izsaukts, kad komponents tiek veiksmīgi ielādēts. Mēs to izmantosim, lai vaicātu navigatoram, lai iegūtu pašreizējo ģeogrāfisko atrašanās vietu. Pēc getInitialState metodes un pirms renderēšanas metodes pievienojiet šo:

componentDidMount: function () {navigator.geolocation.getCurrentPosition (location => {var formattedURL = REQUEST_URL + "lat =" + location.coords.latitude + "& lon =" + location.coords.longitude; console.log (formattedURL); }, kļūda => {konsole.log (kļūda);}); },

Apkopojot, simulators lūgs jums atļaut lietojumprogrammai piekļūt jūsu atrašanās vietai. Jums vajadzētu redzēt pabeigto URL (mainīgais formattedURL), kas redzams Xcode izvades logā. React Native izmanto konsoli.log (), lai parādītu šādu saturu - ļoti ērts atkļūdošanai.

Nākamais solis ir nosūtīt mūsu platumu un garumu uz openweathermap.org API. Pievienojiet šādu kodu zem komponenta komponentDidMount un augstāk renderēt:

fetchData: function (url) {fetch (url). tad ((response) => response.json ()) .then ((responseData) => {var bg; var temp = parseInt (responseData.main.temp); ja (temp 14) {bg = BG_COLD;} else if (temp> = 14 && temp 25) {bg = BG_WARM;} else if (temp> = 25) {bg = BG_HOT;} this.setState ({weatherData: responseData, backgroundColor: bg});}) .done (); },

Iepriekš minētais kods izveido savienojumu ar API, lai iegūtu JSON atbildi. Pēc tam tas parsē atrašanās vietas temperatūru un atjaunina stāvokļa mainīgo backgroundColor. Kad lietotne nākamreiz renderē, tā izmanto šo jauno krāsu.

Visbeidzot, jums jāpievieno rinda, kas izsauks šo jauno fetchData metodi no metodes komponentDidMount. Šis kods atrodas tieši zem console.log, kuru mēs izmantojām, lai parādītu URL:

this.fetchData (formatētsURL);

Tā kā API datu ielāde var kavēties, mums jāparāda jauns skats, kas darbosies kā teksta turēšana. Šī metode atgriezīs jaunu skatu ar teksta ielādi:

renderLoadingView: function () {return (View style = {styles.loading}> Teksta stils = {styles.loadingText}> Laika / teksta ielāde> / View>); },

Kad lietotne tiek renderēta, tai jāpārbauda tās stāvoklis, lai redzētu, vai ir pieejami laika apstākļu dati:

if (! this.state.weatherData) {return this.renderLoadingView (); }

Tagad pievienojiet savus pielāgotos ielādes un iekraušanas teksta stilus stilos, un šī sadaļa ir pabeigta.

Pārbaudot lietotni, jums īsi vajadzētu redzēt ielādes ziņojumu un pēc tam fona krāsu, kas atspoguļo temperatūru.

Informācija par laika apstākļiem

Ir pienācis laiks izveidot komponentu, kas parāda informāciju par laika apstākļiem. Izveidojiet jaunu mapi ar nosaukumu “App” sava projekta saknē. Tajā izveidojiet citu mapi ar nosaukumu “Views”, kurā mēs no raksta darbībām kopēsim WeatherView veidni.

Jūs ievērosiet, ka tas ir gandrīz identisks galvenajai klasei. Tā kā tas jau satur viettura tekstu, mēs atgriezīsimies savā galvenajā index.ios.js klasē un pievienosim komponentam deklarāciju.

var WeatherView = pieprasīt (’./ App / Views / WeatherView.js’);

Tad renderēšanas metodē mēs vienkārši pievienojam:

WeatherView />

Pārstartējot simulatoru ar taustiņu ‘cmd + R’, ekrāna centrā ir jāparāda TEST. Tagad esat ielādējis jauno komponentu.

Ikonu pievienošana

Tagad mēs pievienosim ikonas savam Xcode projektam katram laika apstākļu veidam (kodi ir norādīti šeit). Lietotnē Xcode atveriet ‘Images.xcassets’ un velciet visus attēlus no mapes ‘weather_icons’.

Lai ietaupītu daudz rakstīšanas, dodieties uz GitHub repo un nomainiet pašreizējo WeatherView.js ar 7. darbībā norādīto. Jaunais redzamais kods ir masīvs, kuru indeksē laika apstākļu ikonas kods, kas atgriezts no API. Pirms mēs to varam izmantot, mums ir jāievada laika apstākļu dati šajā komponentā.

Lai to panāktu, mēs atkal varam izmantot stāvokļa mainīgos un, pateicoties propTypes, mēs varam deklarēt datu tipu, kuru mēs sagaidām atpakaļ. Tieši zem WeatherView klases izveides pievienojiet:

propTypes: {laika apstākļi: React.PropTypes.string, temperatūra: React.PropTypes.int, pilsēta: React.PropTypes.string, valsts: React.PropTypes.string},

Labosim no WeatherView atgriezto uzcenojumu. Šis kods pievieno laika apstākļu attēlu, kā arī tekstu par temperatūru, pilsētu un valsti. Ievērojiet, kā tagi atsaucas uz rekvizītu mainīgajiem lielumiem un attēla gadījumā uz masīva atslēgas mainīgo, tāpēc tiek parādīts pareizs attēls.

Skatīt style = {styles.centreContainer}> Attēla avots = {weatherIconArray [this.props.weather]} style = {styles.weatherIcon} /> Teksta stils = {styles.weatherText}> {this.props.temperature} ° / Teksts > Teksta stils = {styles.weatherTextLight}> {this.props.city}, / Teksts> Teksta stils = {styles.weatherTextLight}> {this.props.country} / Teksts> / Skatīt>

Stili, kas mums tam jāpievieno, ir:

weatherIcon: {width: 132, height: 132,}, weatherText: {fontSize: 62, fontWeight: "bold", color: "#FFFFFF", textAlign: "center"}, weatherTextLight: {fontSize: 32, fontWeight: " 100 ", krāsa:" #FFFFFF ", textAlign:" centrs "}

Šeit mēs norādām laika apstākļu ikonu platumu un augstumu. Stils weatherText izveido lielu, smagu temperatūras fontu, un weatherTextLight atrašanās vietas laukiem izveido vieglu fontu.

Datu pievienošana

Atliek tikai pievienot dažus datus. Dodieties uz vietni ‘index.ios.js’ un atjauniniet renderēšanas metodi uz:

var pilsēta = this.state.weatherData.name.toUpperCase (); var valsts = this.state.weatherData.sys.country.toUpperCase (); var temp = parseInt (this.state.weatherData.main.temp) .toFixed (0); var weather = this.state.weatherData.weather [0] .icon.toString (); atgriezties (Skatīt stilu = {[styles.container, {backgroundColor: this.state.backgroundColor}]}> WeatherView weather = {weather} temperature = {temp} city = {city} country = {country} /> / View>) ;

Tas analizē JSON reakciju, ņem pilsētas, valsts un temperatūras datus un nodod tos komponentam. Ja jūs esat cmd + R, lai restartētu simulatoru, jums vajadzētu redzēt savu pēdējo lietotni.

Tas ir React Native lietojumprogrammas veidošanas pamats. Tas ir tik vienkārši! Es ceru, ka jums patīk strādāt ar to.

Vārdi: Antons Mills

Antons Mills ir radošs tehnologs, kurš specializējas arī spēļu izstrādē. Šis raksts sākotnēji tika publicēts tīkla žurnāla 270. numurā.

Patika tas? Izlasiet šos!

• Ātra prototipu izstrāde mobilo lietotņu dizainā
• Kā izveidot lietotni: izmēģiniet šīs lieliskās apmācības
• Jums šobrīd ir pieejama bezmaksas grafiskā dizaina programmatūra!