Kui React Native välja kuulutati, olid esimesed reaktsioonid valdavalt positiivsed. Traditsiooniliselt, kui mõtleme mobiilses ruumis olevatele veebitehnoloogiatele, siis näiteks Apache Cordova kevadel meenuvad, mis võimaldavad meil pakendada veebisaite või veebirakendusi mobiilplatvormide rakendusteks. Selles algajate õpetuses heidame pilgu React Native'i arhitektuurile, React Native'i filosoofiale ja sellele, kuidas see erineb teistest samas ruumis olevatest lahendustest. Artikli lõpuks oleme React “Hello World” rakenduse React Native muutnud.
Alustame selle ütlemisega Reageeri Native on suhteliselt uus tehnoloogia. See on olnud ametlikult saadaval alates 2015. aasta märtsist, olles selle aasta algusest alates privaatses beetaversioonis ja enne seda mõnda aega Facebookis sisemiselt kasutatud. Ütlus “Rooma ei ehitatud ühe päevaga” kehtib üldiselt ka tehnoloogia kohta. Tööriistad nagu grunt
ja selliste platvormide nagu Node.js küpsemiseks kulus aastaid. Veebimaailmas liiguvad asjad kiiresti ja iga päev ilmub tohutu hulk raame, pakette ja tööriistu. arendajad kipuvad veidi skeptilisemaks muutuma ja ei taha hüpata igale hype bandwagonile ainult selleks, et aru saada, et nad sattusid müüja lukustuse olukorda. Uurime, mis teeb React Native'i eriliseks, miks see on tehnoloogia, kuhu tasub siseneda, ja käsitleme mõningaid juhtumeid, kus kõik pole ükssarvikud ja vikerkaar.
Mobiilses veebitehnoloogiast rääkides kuuluvad saadaolevad lahendused tavaliselt ühte järgmistest kategooriatest.
Veebirakendus elab mobiilibrauseris, mida tavaliselt nimetatakse WebView'ks. Ilma suurema ümberehitamiseta töötab veebisait või veebirakendus mobiilseadmes. Võimalik, et täieliku kasutuskogemuse saamiseks peame kaaluma mobiilibrauseri sündmusi, näiteks seadme orientatsiooni muutuste koputamist või kuulamist ning väiksemat ekraani, kuid meil on toimiv mobiiliversioon minimaalse vaevaga. Cordova / PhoneGap on selle kategooria kõige populaarsem variant. Kahjuks on sellel võimalusel suur varjukülg: mõnel juhul on Cordova abil välja töötatud rakendused oluliselt aeglasemad kui kohalikud rakendused, eriti graafiliselt raskete rakenduste jaoks. Muudel juhtudel ei paku mobiilne operatsioonisüsteem tegelikult kõiki WebView funktsioone, mis on saadaval mobiilibrauseris. Kasutajakogemus võib erineda ka omarakendustest; see võib juhtuda rakenduse või platvormi enda tõttu. See probleem võib ulatuda kerimisribadest, mis ei tunne sama, kuni märgatava viivitusega elementide koputamisel.
Hoopis teine lahendus on lõpuks luua natiivne koodibaas. See juhtub, muutes algse lähtekoodi teiseks programmeerimiskeeleks. Vahetame naturaalse jõudlusega abstraktset kihti, millel on teatud ebakindlus. Suletud lähtekoodiga lahenduste puhul pole me isegi kindlad, mis juhtub kapoti all ja millise musta kastiga on tegu. Muudel juhtudel pole me kindel, kui palju järgmine mobiilse operatsioonisüsteemi värskendus meie koodi rikub ja millal parandused või värskendused saadaval on. Selle kategooria populaarne näide oleks Haxe .
Siin kasutame mobiilse keskkonna JavaScripti mootorit ja käivitame oma JavaScripti seal. Natiivsed juhtelemendid on kaardistatud JavaScripti objektide ja funktsioonidega, nii et kui peaksime kutsuma funktsiooni nimega fancyButtonRightHere()
, ilmub ekraanile nupp. NativeScript või Appcelerator Titanium on selle kategooria tuntud näited.
Reageeriva kodumaise võiks liigitada millekski kolmandast kategooriast. IOS-i ja Androidi versioonide jaoks kasutab React Native kapoti all JavaScripti, mis on iOS-i vaikimisi JavaScripti mootor. JavaScriptCore on ka JavaScripti mootor Apple'i Safari brauserites. OS X ja iOS-i arendajad saavad sellega tegelikult otse liituda, kui nad seda soovivad.
Üks suur erinevus on see Reageeri Native käivitab JavaScripti koodi eraldi lõimes, nii et kasutajaliides ei blokeeri ja animatsioonid peaksid olema siidised ja siledad.
Väärib märkimist, et React Native'i „React” ei ole sinna juhuslikult pandud. React Native'i jaoks vajame mõistmist, mida React täpselt pakub. Järgmised mõisted toimivad nii React kui React Native'is samamoodi, ehkki need koodinäited on kohandatud brauseris käitamiseks.
Kui heidame pilgu lihtsale React komponendile, võime esimese asjana märgata, et komponendil on render
funktsioon. Tegelikult viskab React vea, kui komponendi sees pole määratletud renderdamisfunktsiooni.
var MyComponent = function() { this.render = function() { // Render something here }; };
Eriline on see, et me ei aja siin DOM-i elementidega sassi, vaid tagastame XML-põhise konstruktsiooni, mis tähistab seda, mida DOM-is renderdatakse. Seda XML-põhist konstruktsiooni nimetatakse JSX-ks.
var MyComponent = function() { this.render = function() { return Hello there ; }; };
Spetsiaalne JSX trafo võtab kogu selle XML-i väljanägemise koodi ja teisendab selle funktsioonideks. Nii näeb komponent välja pärast teisendamist:
var MyComponent = function() { this.render = function() { return React.createElement('div', { className: 'my-component' }, 'Hello there'); }; };
Suurim eelis on see, et komponenti kiirelt vaadates teame alati, mida see peaks tegema. Näiteks võib komponent esitada mitu komponenti. Me ei saa oma komponente renderdada kusagil mujal kui render
-s funktsioon, seega pole kunagi muret, et me ei tea, kust meie renderdatud komponent täpselt pärineb.
Komponendi sisu loomiseks pakub React lühidalt omadusi või rekvisiite. Sarnaselt XML-i atribuutidele edastame rekvisiidid otse komponendile ja saame seejärel kasutada konstrueeritud komponendi sees olevaid rekvisiite.
var Hello = function(props) { this.render = function() { return Hello {props.name} ; }; }; var Greeter = function() { this.render = function() { return } };
See viib selleni, et meie komponendid on puulaadses struktuuris ja meil on lubatud andmeid edastada ainult alamelementide koostamisel.
Lisaks rekvisiitidele võivad komponentidel olla ka sisemine olek. Selle käitumise silmapaistvam näide oleks klikkide loendur, mis värskendab nupu vajutamisel selle väärtust. Klikkide arv ise salvestatakse olekusse.
Iga rekvisiidi ja oleku muutus käivitab komponendi täieliku uuesti renderdamise.
Kui kõik rekvisiidid või olek muutuvad, siis kuidas reageerib React ise nii hästi? Maagiline koostisosa on 'Virtual DOM'. Kui midagi on vaja uuesti renderdada, luuakse värskendatud DOM-i virtuaalne esitus. Virtuaalne DOM koosneb elementide valgusdisainidest, mis on modelleeritud komponendipuu järgi, muutes nende genereerimise protsessi palju tõhusamaks kui tegelike DOM-elementide genereerimiseks. Enne muudatuste rakendamist tegelikule DOM-ile kontrollitakse, et teha kindlaks, kus täpselt komponendipuus muudatused toimusid, luuakse diff ja rakendatakse ainult neid konkreetseid muudatusi.
kuidas Internetist krediitkaardinumbrit leida
Reaalajas Native arendamiseks peavad algajad seadma teatud eeldused. Kuna iOS oli esimene toetatud platvorm ja see, mida selles õpetuses käsitleme, vajame MacOS-i ja Xcode'i, vähemalt versiooni 6.3. Samuti on vaja Node.js. Mis aitab on installimine Valvur Brewi paketihalduri kaudu koos brew install watchman
Kuigi seda pole tingimata vaja, aitab see meie React Native projekti paljude failide käsitlemisel.
React Native'i installimiseks peame seda lihtsalt tegema installige käsurea rakendus React Native koos npm install -g react-native-cli
. Helistamine react-native
Seejärel aitab käsk luua uue rakenduse React Native. Jooksmine react-native init HelloWorld
loob kausta nimega HelloWorld
milles leidub katlakoodi kood.
Kuna React on põhifunktsioon ja Reacti teegist pärinevad põhiprintsiibid, heidame pilgu sellele, mida peame minimaalsest React “Hello World” rakendusest React Native muutma.
Selles koodinäites kasutame mõningaid ES2015 funktsioone, täpsemalt klasse. React.createClass
-St kinnipidamine on täiesti teostatav või kasutage populaarse moodulimustriga sarnast funktsioonivormi.
var React = require('react'); class HelloThere extends React.Component { clickMe() { alert('Hi!'); } render() { return ( Hello {this.props.name}. Please click me. ); } } React.render(, document.getElementById('content'));
Esimeses etapis peame muutma, nõudes React mooduli kasutamist react-native
selle asemel.
var React = require('react-native'); class HelloThere extends React.Component { clickMe() { alert('Hi!'); } render() { return ( Hello {this.props.name}. Please click me. ); } } React.render(, document.getElementById('content'));
Mis on Reacti veebirakenduse väljatöötamisel tavaliselt tööriistade valmistamise osa, on React Native lahutamatu osa.
Pole üllatav, et mobiilseadmes puudub DOM. Seal, kus me varem kasutasime, peame kasutama , kus me siin vajame.
import React from ‘react'; import {View, Text, Alert} from ‘react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert(‘hi!'); } render() { return ( Hello {this.props.name}. Please click me. ); } } React.render(, document.getElementById('content'));
Ehkki teksti lisamine elementidesse on üsna mugav, ei saa emakeelses maailmas teksti otse a. Selleks peame lisama komponendi.
import React from ‘react'; import {View, Text, Alert} from ‘react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert(‘hi!'); } render() { return ( Hello {this.props.name}. Please click me. ); } } React.render(, document.getElementById('content'));
React Native võimaldab meil kasutada float
-ga jamamise asemel Flexboxi modelleerimist ja inline-block
mida me veebimaailmas nii hästi tunneme. Huvitav on see, et React Native ei kasuta CSS-i.
import React from ‘react'; import {View, Text, StyleSheet, Alert} from ‘react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert(‘hi!'); } render() { return ( Hello {this.props.name}. Please click me. ); } } var styles = StyleSheet.create({ box: { borderColor: 'red', backgroundColor: '#fff', borderWidth: 1, padding: 10, width: 100, height: 100 } }); React.render(, document.getElementById('content'));
Siseste stiilide kasutamine tundub algajatele hämmingus. See sarnaneb üleminekuga, mida Reacti arendajad pidid läbima, kui nad olid silmitsi JSX-iga ja kasutasid varem mallimootoreid nagu juhtraud või Jade.
Idee on selles, et meil pole CSS-i kasutamisel ülemaailmselt stiililehti. Deklareerime stiililehed otse komponentide tasemel ja seega on meil kogu vajalik teave, et näha, mida meie komponent teeb, selle loodud paigutuse ja rakendatavad stiilid.
import React from ‘react'; import {Text} from ‘react-native'; var Headline = function(props) { this.render = () => {props.caption}; }; var headlineStyles = StyleSheet.create({ text: { fontSize: 32, fontWeight: 'bold' } }); module.exports = Headline;
Veebilehtedel klõpsamise ekvivalent on mobiilseadmes elemendi koputamine. Muutkem oma koodi nii, et elemendi puudutamisel ilmuks üles hoiatus.
import React from ‘react'; import {View, Text, StyleSheet, TouchableOpacity, Alert} from ‘react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert('Hi!') } render() { return ( Hello {this.props.name}. Please click me. ); } } var styles = StyleSheet.create({ box: { borderColor: 'red', backgroundColor: '#fff', borderWidth: 1, padding: 10, width: 100, height: 100 } }); React.render(, document.getElementById('content'));
Selle asemel, et sündmused oleksid komponentidel otseselt saadaval, peame vaates vajutades selgesõnaliselt kasutama sündmusi käivitavaid elemente, meie puhul puutetundlikku sündmust. Saadaval on erinevat tüüpi puudutatavaid komponente, millest igaüks pakub erinevat visuaalset tagasisidet.
Platform.OS
Väärtusele pääsemisega on võimalik tuvastada, millisel platvormil rakendus React Native töötab. Oletame, et soovisime ülaltoodud näites kuvada teistsuguse hoiatusteate, lähtudes platvormist, kus töötame. Saame seda teha nii:
... clickMe() { var message = ‘'; if(Platform.OS == ‘ios') { message = ‘Welcome to iOS!'; } else if(Platform.OS == ‘android') { message = ‘Welcome to Android!'; } Alert.alert(message); } ...
Teise võimalusena võib select
Saadaval on ka meetod, mis pakub lülititaolist süntaksit:
… clickMe() { Alert.alert(Platform.select({ ios: ‘Welcome to iOS!', android: ‘Welcome to Android!' }) ); } ...
react-native link
Kohandatud fondi lisamiseks peame mõned rõngad läbi hüppama. Kõigepealt veenduge, et fondi täielik nimi ja fondi failinimi oleksid ühesugused: iOS kasutab fondi ülesvõtmiseks fondi täisnime, Android aga failinime.
php unicode utf 8-le
Seega, kui teie fondi täielik nimi on myCustomFont
, veenduge, et fondi failinimi oleks myCustomFont.ttf
.
Pärast seda peame looma varade kausta ja osutama sellele npm. Saame seda teha, kui kõigepealt loome kausta assets/fonts
alla rakenduse juurkataloogis. Mõni muu kataloog sobib, kuid seda kasutatakse fondide kataloogis tavapärase nimega.
Saame npm öelda, kus meil on vara, lisades Assets
React'i integreerimise jaotise npm all olev vara, rnpm:
'rnpm': { 'Assets': [ './assets/fonts/' ] }
Kui oleme selle kõik ära teinud, saame lõpuks käivitada react-native link
See kopeerib fondid õigetesse kataloogidesse ja lisab vajaliku xml iOS-i info.plist.
Kui see on tehtud, saame oma fondi kasutada, viidates sellele lihtsalt mis tahes stiililehel selle täieliku nime järgi. Kasutagem seda meie Text
-s element:
import React from ‘react'; import {View, Text, StyleSheet, TouchableOpacity, Alert} from ‘react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert('Hi!') } render() { return ( Hello {this.props.name}. Please click me. ); } } var styles = StyleSheet.create({ box: { borderColor: 'red', backgroundColor: '#fff', borderWidth: 1, padding: 10, width: 100, height: 100 }, message: { fontFamily: 'myCustomFont' } }); React.render(, document.getElementById('content'));
React Native kasutab komponentide paigutamisel samu reegleid nagu Flexbox. Oletame, et tahtsime asetada oma nupu ekraani alaossa: mässime oma TouchableOpacity
konteineriga View
:
Hello {this.props.name}. Please click me.
Ja nüüd määratleme container
stiil koos teiste juba määratletud stiilidega:
container: { flex: 1, justifyContent: 'center', alignItems: 'center' }
Keskendume justifyContent
-le ja alignItems
. Need kaks omadust reguleerivad komponendi joondamist vastavalt oma põhiteljele ja sekundaarteljele. Vaikimisi on põhitelg vertikaalne ja sekundaartelg horisontaaltelg (seda saate muuta, määrates atribuudi flexDirection
väärtuseks row
).
justifyContent
sellel on kuus võimalikku väärtust, mille saab määrata:
flex-start
paigutab kõik elemendid koos komponendi piirikarbi algusesse.flex-end
paigutab kõik elemendid lõppu.center
paigutab kõik elemendid piirikarbi keskele.space-around
jaotab komponendid ühtlaselt ja koondab komponendid nende loodud piirikastidesse.space-evenly
jaotab komponendid samuti ühtlaselt, kuid püüab komponentide ja teiste piiride vahele jätta võrdse hulga ruumi.space-between
hajutab komponendid, hoides külgnevate komponentide vahekaugust võrdseks.alignItems
saab seada neljale võimalikule väärtusele: flex-start
, flex-end
, center
ja stretch
. Kolm esimest käituvad nagu justifyContent
jaoks, samas kui stretch
paneb komponendi hõivama kogu telje ulatuses vaba ruumi, nii et telg oleks täielikult täidetud.
Niisiis, kuna me tahame oma TouchableOpacity
allosas kuvatakse horisontaaltelje keskel ja saame stiili muuta nii:
container: { flex: 1, justifyContent: 'flex-end', alignItems: 'center' }
Lisateave väärtuste kohta justifyContent
ja alignItems
saab, võib leida siin ja siin .
Kui arendate Reactiga brauseri jaoks, peame lihtsalt määrama ühenduspunkti, helistama React.render
ja laskma Reactil oma võlu teha. Reactive'is on see natuke erinev.
import React from ‘react'; import {View, Text, StyleSheet, TouchableOpacity, Alert, Platform} from ‘react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert(Platform.select({ ios: ‘Welcome to iOS!', android: ‘Welcome to Android!' })); } render() { return ( Hello {this.props.name}. Please click me. ); } } var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'flex-start', alignItems: 'center' }, box: { borderColor: 'red', backgroundColor: '#fff', borderWidth: 1, padding: 10, width: 100, height: 100 }, message: { fontFamily: 'myCustomFont' } }); var MainComponent = function() { this.render = function() { return ; } }; AppRegistry.registerComponent('MainComponent', function() { return MainComponent; });
Peame komponendi Objective-C külje jaoks registreerima, kasutades selleks AppRegistry
objekt. Meie antud nimi peab vastama Xcode projekti sees olevale nimele.
Meie rakendusel Hello World React Native on oluliselt rohkem koodiridu kui veebi kolleegil, kuid teisalt viib React Native murede eraldamise veidi kaugemale, eriti seetõttu, et stiilid on koos komponendiga määratletud.
Vahemärkusena ei tohiks me clickMe
taasesitada meetodit this
kontekstis render
meetod, eriti kui meie React (Native) rakendus kasvab veidi keerukamaks. See seob meetodi iga renderduskõne puhul, mis võib muutuda üsna suureks. Alternatiiviks on meetodi sidumine konstruktori sees.
Rakenduse käitamiseks peame asendama index.ios.js
sisu fail meie teisendatud rakenduse koodijupiga viimasest sammust. Siis peame lihtsalt avama projekti Xcode ja vajutama suurt Run nuppu. Esiteks avaneb terminal React Native serveriga ja seejärel ilmub simulaatori aken. Reactive Native server loob kimpu, mille natiivrakendus seejärel tõmbab. See võimaldab veebiarenduse sarnast kiiret arengutsüklit, kus muudatused kajastuvad simulaatoris peaaegu koheselt.
Androidi jaoks piisab, kui lisate oma package.json
-sse järgmise faili all scripts
:
'android-linux': 'react-native bundle --platform android --dev false --entry-file index.ios.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/ main/res && react-native run-android'
Ja siis käivitage npm run android-linux
. Veenduge, et android/app/src/main/assets
kataloog on eelnevalt olemas.
Kui terminal on hüpanud, kuvatakse meie rakendus simulaatoris. CMD + D vajutamine näitab arendusmenüüd. Kastil klõpsates kuvatakse siis hoiatus. IOS-i versioon:
Ja Android renderdab midagi sellist:
Levitamiseks ei sobiks meie jaoks rakendus, mis osutab kohalikule arendusserverile. Sel põhjusel saame luua paketi kasutamiseks siis, kui React Native server ei käivitu käsuga react-native bundle
Sellisel juhul peame värskendama didFinishLaunchingWithOptions
meetod AppDelegate
võrguühenduseta paketi kasutamiseks.
See näidisrakendus on ka saadaval Githubis .
Teine mainimist väärt asi on see, et me ei kasuta oma mobiilirakenduste jaoks mitte ainult Reacti kontseptsioone ja JavaScripti, vaid mõned töövoogudest, millega veebiarendajad on harjunud, on saadaval ka koos React Native'iga. Veebiarendusest tulles oleme harjunud arendajate tööriistade, elementide kontrollimise ja reaalajas uuesti laadimisega.
React Native töötab nii, et see paneb kõik meie JavaScripti failid kimpu. See komplekt esitatakse serverist või komplekteeritakse koos rakendusega. Esimene neist on simulaatori arendamiseks uskumatult kasulik, kuna saame võimaldada reaalajas laadimist. Arendajamenüü React pakub pole sugugi nii vägev kui Chrome'i arendaja tööriistad, kuid pakub reaalajas uuesti laadimise ja veebipõhise arendajakogemuse loomist silumine Chrome'i (või Safari) arendaja / siluri tööriistadega.
Veebiarendajad tunnevad JSFiddle'i või JSBini, veebimänguplatsi kiirete veebitestide jaoks. Seal on sarnane keskkond mis võimaldab meil React Native'i veebibrauseris proovida.
Algselt soovitasin React Native'ile ettevaatlikumat lähenemist. Täna on see küps ja kindel valik.
React'i üks suur eelis on see, et see ei mõjuta teie töövoogu, kuna see esindab lihtsalt vaatekihti. Kas soovite määratleda oma Grunti torujuhtme? Või kasutaksite pigem Webpacki? Ja kas kasutate oma mudelivajaduste jaoks Backbone.js-i? Või soovite minna tavaliste JavaScripti objektidega? Kõigile neile küsimustele vastamine sõltub täielikult sinust, sest React ei sea nendele valikutele mingeid piiranguid. Nagu ametlik sait oli öelnud: 'Kuna React ei tee ülejäänud tehnoloogiakogumi kohta oletusi, on seda juba olemasoleva projekti väikese funktsiooni abil lihtne proovida.'
Teatud määral kehtib see ka React Native kohta. Mobiiliarendajad saavad integreerida React Native'i oma rakenduse osaks, kasutada veebist inspireeritud arendustöö voogu ja vajadusel soovi korral integreerida raamatukogu suuremas mahus.
Igal juhul on üks asi kindel: Reageeri Native ei kao kuhugi . Facebookil on selles tohutu osalus, kui rakenduste poodides on mitu React Native toega rakendust. React Native'i ümbritsev kogukond on tohutu ja kasvab jätkuvalt.
sõlme js funktsiooni tagastusväärtusSeotud: Ehitage QR-skanner: React Native Camera juhendaja
React Native on raamistik natiivsete iOS- ja Android-rakenduste loomiseks JavaScripti abil. See põhineb samadel kontseptsioonidel nagu React, kuid kasutab kasutajaliidese (UI) renderdamiseks veebikomponentide asemel natiivseid komponente.
React on JavaScripti esiotsa teek, mis on loodud deklaratiivsete vaadete tõhususe ja prognoositavuse huvides.
Kui toetate mitut platvormi, annab React Native teie rakenduse tuumkoodi taaskasutamise osas kindla eelise. Võib-olla peate ikkagi esitama mõne platvormispetsiifilise koodi, kuid seda on kindlasti vähem kirjutada ja hooldada, kui kirjutaksite igale platvormile oma rakenduse.
Natiivrakendus on see, mis on kompileeritud ja töötab otse selle sihtplatvormil. Vaikimisi on sellel välimus, mis sobib platvormiga. Reageeri Native'i eesmärk on anda teile sama omapärane välimus ja tunne, pakkudes samas täiendavat kaasaskantavust ja tuttavat metoodikat.