Përmbajtje
Zhvillimi vendas i aplikacioneve mobile është një mjedis i vështirë. Ka sisteme të ndryshme operative, një grup i madh prodhuesish të pajisjeve dhe një gamë e madhe e rezolucioneve të ekranit për tu ndërtuar. Fatmirësisht, Facebook ka lëshuar React Native - një kornizë e krijuar për të zgjeruar qasjen React për zhvillimin e aplikacioneve mobile.
Në këtë manual, ne do të ndërtojmë një aplikacion për motin në kohë reale duke përdorur API-në falas të OpenWeatherMap. Unë do të mbuloj punën me komponentët, imazhet dhe stilet React Native, dhe ngarkimin dhe analizimin e të dhënave JSON.
Fillimi
Së pari, shkarkoni skedarët burim nga GitHub. Do të gjeni një dosje 'burim-imazhe' që përmban imazhet udhëzuese, një dosje 'artikuj-hapa' që përmban kodin burimor për secilin hap (plus komentet) dhe një dosje 'projekti i përfunduar' që përmban projektin përfundimtar të burimit.
Do t'ju duhet Xcode për përpilimin e aplikacioneve iOS (të disponueshme nga App Store) dhe menaxherit të paketave Homebrew OSX. Pasi të keni instaluar Homebrew, mund të hapni një dritare të Terminalit dhe të ekzekutoni komandat e mëposhtme (nëse keni probleme, këtu keni një udhëzues):
- krijoj nyjen për të instaluar Node.js
- krijoj instalimin e rojes për të instaluar Watchman, një shërbim i shikimit të skedarëve
- krijoj rrjedhën e instalimit, një kontrollues statik i llojit të të dhënave
- npm instaloni -g reagoni-vendas për të instaluar React Native
Ju mund ta krijoni projektin duke shtypur reagimin natyror të iniciativës. Bëni një shënim të dosjes së projektit dhe hapeni për të parë strukturën e paracaktuar të dosjes së React Native. Drejtoria iOS është vendi ku ndodhen skedarët e projektit të platformës iOS. Dosja që na intereson në këtë pikë është 'index.ios.js'. Hapni këtë në redaktorin tuaj të zgjedhur.
Le të hedhim një vështrim në strukturën e dosjes:
- Linjat 8-11 përfshijnë React kërkon për këtë përbërës të aplikacionit
- Rreshtat 15-32 deklarojnë klasën e paracaktuar për planin e motit dhe metodat e tij të pasqyrimit
- Linjat 34-51 përcaktojnë stilet e përdorura në aplikacion
- Linja 53 është emri i eksportit të këtij Komponenti
Gjëja e parë që duhet të bëjmë është të përgatisim një kanavacë bosh. Ndryshoni metodën e dhënies në:
pasqyro: funksioni () {kthimi (Shiko stilin = {[styles.container, {backgroundColor: this.state.backgroundColor}]}> / View>); }
Kjo krijon një pamje të zbrazët duke përdorur një varg stilesh - stili i kontejnerit dhe një ndryshore e gjendjes e quajtur backgroundColor. Ne do të ndryshojmë ndryshoren backgroundColor bazuar në temperaturën aktuale kur kërkojmë API të motit për të dhëna. Ne gjithashtu mund të vendosim stilin e kontejnerit që të përdorë flex: 1 për përqendrimin.
kontejner: {flex: 1},
Tani do të përdorim metodën getInitialState të React. Kjo thirret automatikisht në çdo përbërës kur ekzekutohet aplikacioni. Ne do ta përdorim atë për të deklaruar variablat e gjendjes që përdoren më vonë. Shtoni këtë mbi metodën e pasqyrimit në klasën WeatherApp:
getInitialState: funksioni () {return {weatherData: null, backgroundColor: "#FFFFFF"}; },
Tani është një kohë perfekte për të hyrë në Xcode dhe për të goditur lojën në imitues për të parë aplikacionin tuaj. Një nga tiparet fantastike të React Native është shpejtësia e saj e rikompilimit. Redaktoni #FFFFFF në një ngjyrë tjetër dhe shtypni 'cmd + R' për të parë ringarkimin pothuajse të menjëhershëm - goxha i zoti!
Deklarimi i konstanteve
Le të deklarojmë konstantat e përdorura për ngjyrat e sfondit, dhe një tjetër për URL-në openweathermap.org që siguron të dhënat e motit. Shtoni sa më poshtë poshtë React kërkon:
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&";
Do të duhet të përdorim edhe një nga metodat e integruara të React, componentDidMount. Kjo thirret automatikisht kur një përbërës ngarkohet me sukses. Ne do ta përdorim atë për të pyetur navigatorin për të marrë vendndodhjen gjeologjike aktuale. Shtoni më poshtë pas metodës getInitialState dhe para metodës së pasqyrimit:
componentDidMount: function () {navigator.geolocation.getCurrentPosition (location => {var formattedURL = REQUEST_URL + "lat =" + location.coords.latitude + "& lon =" + location.coords.longitude; console.log (formattedURL); }, error => {console.log (gabim);}); },
Kur përpilohet, imituesi do t'ju kërkojë të lejoni hyrjen e aplikacionit në vendndodhjen tuaj. Ju duhet të shihni URL-në e përfunduar (ndryshoren e formatuarURL) të shfaqur në dritaren e daljes Xcode. React Native përdor console.log () për të shfaqur përmbajtje si kjo - shumë i dobishëm për korrigjimin e gabimeve.
Hapi tjetër është dërgimi i gjerësisë dhe gjatësisë gjeografike në API të openweathermap.org. Shtoni kodin e mëposhtëm poshtë përbërësitDidMount dhe sipër jepni:
fetchData: funksioni (url) {fetch (url) .pastaj ((përgjigje) => përgjigje.json ()). atëherë ((përgjigjeData) => {var bg; var temp = parseInt (përgjigjeData.main.temp); nëse (temp 14) {bg = BG_COLD;} ndryshe nëse (temp> = 14 && temp 25) {bg = BG_WARM;} tjetër nëse (temp> = 25) {bg = BG_HOT;} this.setState ({weatherData: përgjigjeData, Ngjyra e sfondit: bg});}) .bërë (); },
Kodi i mësipërm lidhet me API për të marrë përgjigjen JSON. Më pas analizon temperaturën e vendndodhjes dhe azhurnon sfondin e ndryshueshëm të gjendjesColor. Kur aplikacioni rendit tjetër, ajo përdor këtë ngjyrë të re.
Më në fund, duhet të shtoni një linjë që do ta quajë këtë metodë të re fetchData nga metoda componentDidMount. Kodi i mëposhtëm shkon direkt poshtë tastierë.log që kemi përdorur për të shfaqur URL-në:
this.fetchData (formatuarURL);
Meqenëse mund të ketë një vonesë në ngarkimin e të dhënave API, ne duhet të shfaqim një pamje të re që do të veprojë si mbajtja e tekstit. Metoda e mëposhtme do të kthejë një pamje të re me ngarkimin e tekstit:
renderLoadingView: funksioni () {return (Shiko stilin = {styles.loading}> Teksti style = {styles.loadingText}> Po ngarkon motin / tekstin> / pamjen>); },
Ndërsa aplikacioni jep, ajo duhet të kontrollojë gjendjen e saj për të parë nëse të dhënat e motit janë në dispozicion ose jo:
if (! this.state.weatherData) {ktheni këtë.renderLoadingView (); }
Tani, shtoni stilin tuaj të ngarkimit dhe ngarkimit tuaj të personalizuar në stilet dhe kjo pjesë është bërë.
Kur provoni aplikacionin, duhet të shihni shkurtimisht mesazhin e ngarkimit dhe më pas një ngjyrë të sfondit që reflekton temperaturën.
Informacion mbi motin
Tani është koha për të krijuar përbërësin që tregon informacionin e motit. Krijoni një dosje të re të quajtur 'App' në rrënjën e projektit tuaj. Në këtë, krijoni një dosje tjetër të quajtur 'Views', në të cilën ne do të kopjojmë modelin WeatherView nga hapat e artikullit.
Ju do të vini re se është pothuajse identike me klasën kryesore. Meqë tashmë përmban tekst të mbajtësit të vendit, ne do të kthehemi përsëri në klasën tonë kryesore index.ios.js dhe do të shtojmë një deklaratë për përbërësin.
var WeatherView = kërkoj ('./ App / Views / WeatherView.js');
Pastaj në metodën e pasqyrimit, ne thjesht shtojmë:
WeatherView />
Me rifillimin e imituesit me 'cmd + R', duhet të shihni 'TEST' të shfaqur në qendër të ekranit. Tani keni ngarkuar përbërësin tuaj të ri.
Shtimi i ikonave
Tani do të shtojmë ikona në projektin tonë Xcode për secilin nga llojet e motit (kodet jepen këtu). Në Xcode, hapni 'Images.xcassets' dhe tërhiqni të gjitha imazhet nga dosja 'weather_icons'.
Për të kursyer shumë shtypje, shkoni në repon e GitHub dhe zëvendësoni 'WeatherView.js' tuaj aktual me atë në Hapin 7. Kodi i ri që mund të shihni është një varg, indeksuar nga kodi i ikonës së motit të kthyer nga API. Para se ta përdorim, duhet të kalojmë të dhënat e motit në këtë përbërës.
Për ta arritur këtë, ne mund të përdorim përsëri variablat e gjendjes, dhe - falë propTypes - mund të deklarojmë llojin e të dhënave që presim përsëri. Shtoni sa vijon direkt nën krijimin e klasës WeatherView:
llojet propTip: {moti: React.PropTypes.string, temperatura: React.PropTypes.int, qyteti: React.PropTypes.string, vendi: React.PropTypes.string},
Le të ndryshojmë shënimin e kthyer nga WeatherView. Kodi i mëposhtëm shton një imazh të motit, plus tekst për temperaturën dhe qytetin dhe vendin. Vini re se si etiketat referojnë ndryshoret e props dhe, për imazhin, ndryshoren për çelësin e grupit, kështu që tregon imazhin e saktë.
Shikoni stilin = {styles.centreContainer}> Burimin e figurës = {weatherIconArray [this.props.weather]} style = {styles.weatherIcon} /> Stili i tekstit = {styles.weatherText}> {this.props.temperature} ° / Teksti > Stili i tekstit = {styles.weatherTextLight}> {this.props.city}, / Teksti> Stili i tekstit = {styles.weatherTextLight}> {this.props.country} / Teksti> / Pamja>
Stilet që duhet të shtojmë për këtë janë:
Ikona e motit: {gjerësia: 132, lartësia: 132,}, moti Teksti: {fontSize: 62, fontWeight: "bold", ngjyra: "#FFFFFF", textAlign: "center"}, weatherTextLight: {fontSize: 32, fontWeight: " 100 ", ngjyra:" #FFFFFF ", teksti Rreshto:" qendra "}
Këtu ne specifikojmë gjerësinë dhe lartësinë e ikonave të motit. Stili weatherText krijon një font të madh dhe të rëndë për temperaturën, dhe weatherTextLight krijon një font të lehtë për fushat e vendndodhjes.
Shtimi i të dhënave
Mbetet vetëm të shtoni disa të dhëna. Drejtohuni tek 'index.ios.js' tuaj dhe azhurnoni metodën e pasqyrimit në:
var qyteti = this.state.weatherData.name.toUpperCase (); var country = this.state.weatherData.sys.country.toUpperCase (); var temp = parseInt (this.state.weatherData.main.temp) .toFixed (0); mot moti = this.state.weatherData.weather [0] .icon.toString (); kthimi (Shiko stilin = {[styles.container, {backgroundColor: this.state.backgroundColor}]}> WeatherView moti = {moti} temperatura = {temp} qyteti = {qyteti} vendi = {vendi} /> / Pamja>) ;
Kjo analizon përgjigjen e JSON dhe merr të dhënat e qytetit, vendit dhe temperaturës dhe ia kalon komponentit. Tani nëse jeni 'cmd + R' për të rifilluar imituesin, duhet të shihni aplikacionin tuaj përfundimtar.
Ky është thelbi i ndërtimit të një aplikacioni React Native. Thatshtë kaq e thjeshtë! Shpresoj që të kënaqesh duke punuar me të.
Fjalët: Anton Mills
Anton Mills është një teknolog krijues i cili gjithashtu specializohet në zhvillimin e lojërave. Ky artikull u botua fillimisht në numrin 270 të revistës net.
Te pelqen kjo? Lexoni këto!
- Prototip i shpejtë në hartimin e aplikacionit celular
- Si të krijoni një aplikacion: provoni këto udhëzime të shkëlqyera
- Softuer falas për dizajnin grafik i disponueshëm për ju tani!
