Bumuo ng isang katutubong mobile app kasama ang React Native

May -Akda: Louise Ward

Petsa Ng Paglikha: 5 Pebrero 2021

I -Update Ang Petsa: 1 Hunyo 2024

Video.: Signs Na Nakikipaglandian Ang Babae Sayo

Nilalaman

Nagsisimula
Pagdedeklara ng mga pare-pareho
Impormasyon ng panahon
Pagdaragdag ng mga icon
Pagdaragdag ng data

Ang pag-unlad ng katutubong mobile app ay isang mahirap na kapaligiran. Mayroong iba't ibang mga operating system, isang malawak na hanay ng mga tagagawa ng handset at isang malaking hanay ng mga resolusyon sa screen upang maitayo. Sa kabutihang palad, inilabas ng Facebook ang React Native - isang balangkas na idinisenyo upang pahabain ang React na diskarte sa pagpapaunlad ng mobile application.

Sa tutorial na ito, magtatayo kami ng isang real-time na app ng panahon gamit ang libreng API ng OpenWeatherMap. Saklaw ko ang pagtatrabaho sa mga bahagi ng React Native, koleksyon ng imahe at mga istilo, at paglo-load at pag-parse ng data ng JSON.

Nagsisimula

Una, i-download ang mga pinagmulang file mula sa GitHub. Mahahanap mo ang isang folder na 'mapagkukunan ng imahe' na naglalaman ng mga imahe ng tutorial, isang folder na 'artikulo-hakbang' na naglalaman ng source code para sa bawat hakbang (kasama ang mga komento), at isang folder na 'natapos na proyekto' na naglalaman ng huling proyekto ng mapagkukunan.

Kakailanganin mo ang Xcode para sa pag-iipon ng mga iOS app (magagamit mula sa App Store) at ang manager ng package ng Homebrew OSX. Kapag na-install mo na ang Homebrew, maaari mong buksan ang isang window ng Terminal at patakbuhin ang mga sumusunod na utos (kung mayroon kang mga isyu, mayroong isang gabay dito):

magluto ng pag-install ng node upang mai-install ang Node.js
magluto maglagay ng tagapagbantay upang mai-install ang Watchman, isang serbisyo sa panonood ng file
magluto ng daloy ng pag-install, isang static na uri ng checker ng data
npm i-install -g react-katutubong-ui upang mai-install ang React Native

Maaari kang lumikha ng proyekto sa pamamagitan ng pagta-type ng react-katutubong init weatherapp. Gumawa ng isang tala ng folder ng proyekto at buksan ito upang makita ang default na istraktura ng folder ng React Native. Ang direktoryo ng iOS ay kung saan naninirahan ang mga file ng proyekto ng iOS platform. Ang file na interesado kami sa puntong ito ay 'index.ios.js'. Buksan ito sa iyong editor ng pagpipilian.

Tingnan natin ang istraktura ng folder:

Isinasama sa mga linya 8-11 ang React na hinihingi para sa sangkap na ito ng app
Ang mga linya na 15-32 ay idineklara ang default na klase para sa mga weatherapp at mga pamamaraan sa pag-render
Ang mga linya na 34-51 ay tumutukoy sa mga istilong ginamit sa app
Ang Line 53 ay ang pang-export na pangalan ng Component na ito

Ang unang bagay na kailangan nating gawin ay upang maghanda ng isang blangko na canvas. Baguhin ang paraan ng pag-render sa:

render: function () {return (View style = {[style.container, {backgroundColor: this.state.backgroundColor}]}> / View>); }

Lumilikha ito ng walang laman na pagtingin gamit ang isang hanay ng mga estilo - ang istilo ng lalagyan at isang variable ng estado na tinatawag na backgroundColor. Babaguhin namin ang variable ng backgroundColor batay sa kasalukuyang temperatura kapag tinanong namin ang API ng panahon para sa data. Maaari din naming itakda ang istilo ng lalagyan upang magamit ang flex: 1 para sa pagsentro.

lalagyan: {flex: 1},

Ngayon ay gagamitin namin ang paraan ng getInitialState ng React. Awtomatiko itong naiimbitahan sa anumang bahagi kapag pinatakbo ang app. Gagamitin namin ito upang ideklara ang mga variable ng estado na gagamitin sa paglaon. Idagdag ito sa itaas ng paraan ng pag-render sa klase ng WeatherApp:

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

Ngayon ay isang perpektong oras upang tumalon sa Xcode at pindutin ang pag-play sa simulator upang makita ang iyong aplikasyon. Ang isa sa mga kamangha-manghang tampok ng React Native ay ang muling pagsasama-sama ng bilis nito. I-edit ang #FFFFFF sa ibang kulay at pindutin ang 'cmd + R' upang makita ang halos instant na pag-reload - medyo maayos!

Pagdedeklara ng mga pare-pareho

Ipahayag natin ang mga patuloy na ginamit para sa mga kulay ng background, at isa pa para sa openweathermap.org URL na nagbibigay ng data ng panahon. Idagdag ang sumusunod sa ibaba lamang ng hinihiling ng React:

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&";

Kakailanganin din naming gumamit ng isa pang built-in na pamamaraan ng React, componentDidMount. Awtomatiko itong naiimbitahan kapag matagumpay na na-load ang isang bahagi. Gagamitin namin ito upang magtanong sa nabigasyon upang makuha ang kasalukuyang geolocation. Idagdag ang sumusunod pagkatapos ng getInitialState na pamamaraan at bago ang paraan ng pag-render:

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

Kapag naipon, hihilingin sa iyo ng simulator na payagan ang pag-access ng application sa iyong lokasyon. Dapat mong makita ang nakumpletong URL (ang variable na naka-formatURL) na ipinakita sa window ng output ng Xcode. Gumagamit ang React Native ng console.log () upang maipakita ang nilalamang tulad nito - napaka madaling gamiting para sa pag-debug.

Ang susunod na hakbang ay upang ipadala ang aming latitude at longitude sa openweathermap.org API. Idagdag ang sumusunod na code sa ibaba ng bahagi ngDidMount at itaas ang pag-render:

fetchData: function (url) {fetch (url) .pagkatapos ((response) => response.json ()) .tapos ((responseData) => {var bg; var temp = parseInt (responseData.main.temp); kung (temp 14) {bg = BG_COLD;} iba pa kung (temp> = 14 && temp 25) {bg = BG_WARM;} iba pa kung (temp> = 25) {bg = BG_HOT;} this.setState ({weatherData: responseData, backgroundColor: bg});}) .tapos (); },

Ang code sa itaas ay kumokonekta sa API upang makuha ang tugon ng JSON. Pagkatapos ay ini-parse ang temperatura ng lokasyon at ina-update ang variable ng background ng kulay ng Color. Kapag sumunod na mag-render ang app, ginagamit nito ang bagong kulay.

Sa wakas, kailangan mong magdagdag ng isang linya na tatawag sa bagong pamamaraan na fetchData mula sa pamamaraan ng componentDidMount. Ang sumusunod na code ay dumidiretso sa ibaba ng console.log na ginamit namin upang maipakita ang URL:

this.fetchData (naka-formatURL);

Dahil maaaring may pagkaantala sa paglo-load ng data ng API, kailangan naming magpakita ng isang bagong pagtingin na kikilos bilang may hawak na teksto. Ang sumusunod na pamamaraan ay magbabalik ng isang bagong pagtingin sa pag-load ng teksto:

renderLoadingView: function () {return (View style = {style.loading}> Text style = {style.loadingText}> Nilo-load ang Panahon / Text> / View>); },

Habang nagre-render ang app, kailangang suriin nito ang estado nito upang makita kung ang data ng panahon ay magagamit o hindi:

kung (! this.state.weatherData) {ibalik ito.renderLoadingView (); }

Ngayon, idagdag ang iyong sariling pasadyang paglo-load at paglo-load ng estilo ng Teksto sa mga istilo at tapos na ang seksyong ito.

Kapag sinubukan mo ang app, dapat mong madaling makita ang naglo-load na mensahe at pagkatapos ay isang kulay sa background na sumasalamin sa temperatura.

Impormasyon ng panahon

Panahon na ngayon upang lumikha ng sangkap na nagpapakita ng impormasyon ng panahon. Lumikha ng isang bagong folder na tinatawag na 'App' sa iyong root ng proyekto. Sa ito, lumikha ng isa pang folder na tinatawag na 'Views', kung saan makokopya namin ang template ng WeatherView mula sa mga hakbang sa artikulo.

Mapapansin mo na halos magkapareho ito sa pangunahing klase. Dahil naglalaman na ito ng teksto ng placeholder, babalik kami sa aming pangunahing klase ng index.ios.js at magdagdag ng isang deklarasyon para sa bahagi.

var WeatherView = nangangailangan (’./ App / Views / WeatherView.js’);

Pagkatapos sa paraan ng pag-render, idinagdag lamang namin ang:

WeatherView />

Sa pag-restart ng simulator na may 'cmd + R', dapat mong makita ang 'TEST' na ipinakita sa gitna ng screen. Na-load mo na ang iyong bagong sangkap.

Pagdaragdag ng mga icon

Ngayon ay magdaragdag kami ng mga icon sa aming proyekto sa Xcode para sa bawat uri ng panahon (ibinigay ang mga code dito). Sa Xcode, buksan ang 'Images.xcassets' at i-drag ang lahat ng mga imahe mula sa folder na 'weather_icons'.

Upang makatipid ng maraming pagta-type, pumunta sa repo ng GitHub, at palitan ang iyong kasalukuyang 'WeatherView.js' sa isa sa Hakbang 7. Ang bagong code na nakikita mo ay isang array, na-index ng code ng icon ng lagay na bumalik mula sa API. Bago namin ito magamit, kailangan naming ipasa ang data ng panahon sa sangkap na ito.

Upang makamit ito, maaari naming magamit muli ang mga variable ng estado, at - salamat sa mga propTypes - maaari nating ideklara ang uri ng data na inaasahan nating babalik. Direktang idagdag ang sumusunod sa ilalim ng paglikha ng klase ng WeatherView:

propTypes: {panahon: React.PropTypes.string, temperatura: React.PropTypes.int, lungsod: React.PropTypes.string, bansa: React.PropTypes.string},

Baguhin natin ang markup na ibinalik mula sa WeatherView. Ang sumusunod na code ay nagdaragdag ng isang imahe ng panahon, kasama ang teksto para sa temperatura at lungsod at bansa. Pansinin kung paano tinukoy ng mga tag ang mga variable ng props at, para sa imahe, ang variable para sa susi ng array, kaya nagpapakita ang tamang imahe.

View style = {style.centreContainer}> Pinagmulan ng imahe = {weatherIconArray [this.props.weather]} style = {style.weatherIcon} /> Text style = {style.weatherText}> {this.props.temperature} ° / Text > Estilo ng teksto = {style.weatherTextLight}> {this.props.city}, / Text> Text style = {style.weatherTextLight}> {this.props.country} / Text> / View>

Ang mga istilo na kailangan naming idagdag para dito ay:

weatherIcon: {width: 132, taas: 132,}, weatherText: {fontSize: 62, fontWeight: "bold", color: "#FFFFFF", textAlign: "center"}, weatherTextLight: {fontSize: 32, fontWeight: " 100 ", kulay:" #FFFFFF ", textAlign:" center "}

Dito tinukoy namin ang lapad at taas ng mga icon ng panahon. Lumilikha ang istilong WeatherText ng isang malaki, mabibigat na font para sa temperatura, at ang WeatherTextLight ay lumilikha ng isang light font para sa mga patlang ng lokasyon.

Pagdaragdag ng data

Ang natitira lamang ay upang magdagdag ng ilang data. Tumungo sa iyong 'index.ios.js' at i-update ang paraan ng pag-render sa:

Ini-parse nito ang tugon ng JSON at kinukuha ang data ng lungsod, bansa at temperatura, at ipinapasa ito sa bahagi. Ngayon kung cmd + R 'mong i-restart ang simulator, dapat mong makita ang iyong pangwakas na app.

Ito ang core ng pagbuo ng isang React Native application. Napakasimple nito! Inaasahan kong nasiyahan ka sa pagtatrabaho nito.

Mga salita: Anton Mills

Si Anton Mills ay isang malikhaing teknologo na dalubhasa rin sa pagpapaunlad ng laro. Ang artikulong ito ay orihinal na na-publish sa isyu ng 270 ng net magazine.

Nagustuhan ito? Basahin ang mga ito!