Share
În prima parte a acestei serii, ați învățat cum să configurați React Native pe mașina dvs., să creați și să utilizați componente personalizate și să utilizați biblioteci de terțe părți, cum ar fi moment.js. În acest tutorial, învățați cum să utilizați cererile de rețea aduce, redați o pagină Web utilizând built-in-ul WebView și rulați aplicația pe un dispozitiv fizic.
În prima parte a acestei serii, am folosit api dar nu am definit-o încă. Începeți prin crearea unui src și adăugați un fișier la el, api.js. Deschideți fișierul și adăugați următoarele:
(functie (json) retur json;); apoi (functie (json) retur json;);
Acest fișier utilizează aduce funcția, care este disponibilă implicit în React Native. Această funcție permite aplicației să efectueze solicitări de rețea. Dacă ați folosit jQuery, este destul de similar cu $ .ajax funcţie. Specificați o adresă URL și câteva date opționale și primiți un răspuns înapoi.
Singura diferență este că trebuie să faci un pic de muncă suplimentară. Funcția pentru capturarea primei promisiuni returnează răspunsul brut, ceea ce înseamnă că trebuie să apelați JSON metoda pe raspuns pentru a obține promisiunea care returnează șirul JSON. Deci, trebuie să returnați rezultatul de la acest lucru și să capturați promisiunea sunând la atunci funcția din nou și să treacă la funcția care va fi chemată odată ce promisiunea va fi rezolvată.
Șirul JSON ar fi trecut ca argument pentru această funcție, așa că îl vom returna. aduce metoda returnează o promisiune atunci când sunăm api metoda, trebuie să mai sunăm atunci metodă de captare a răspunsului real, la fel ca în prima parte a acestei serii.
api (story_url) .then ((poveste) => ...);
Accentsconagua
Pagină web component Pagină web componenta este responsabilă pentru redarea unei pagini web. Utilizează WebView pentru a face acest lucru.
var React = necesită ("reaction-native"); var AppRegistry, StyleSheet, Text, Vizualizare, WebView = Reacție; var Button = necesită ("buton reactiv-nativ"); var GiftedSpinner = necesită ("reactiv-nativ-talentat-spinner"); var _ = necesită ("lodash"); var WebPage = React.createClass (getInitialState: function () retur isLoading: true; render: function () This.truncate (this.state.pageTitle) this.state.isLoading && ); , truncate: funcția (str) return _.truncate (str, 20); , peNavigationStateChange: funcția (navState) if (! navState.loading) this.setState (isLoading: false, pageTitle: navState.title); , înapoi: function () this.props.navigator.pop (); ); var stiles = StyleSheet.create (container: flex: 1, webview_header: paddingLeft: 10, backgroundColor: '# FF6600', flex: 1, justifyContent: : paddingLeft: 10, paddingRight: 10, justifyContent: 'centru', webview_body: flex: 9, butonul: textAlign: 'stânga', culoare:'FFFF ', page_title: color:' #FFF ', spinner: alignItems:' flex-end '); module.exports = WebPage;În primul rând, facem unele gospodării, creând variabilele de care avem nevoie și cerând bibliotecile pe care le vom folosi.
var React = necesită ("reaction-native"); var AppRegistry, StyleSheet, Text, Vizualizare, WebView = Reacție; var Button = necesită ("buton reactiv-nativ"); var GiftedSpinner = necesită ("reactiv-nativ-talentat-spinner"); var _ = necesită ("lodash");Apoi, vom crea Pagină web component.
var WebPage = React.createClass (...);
Noi am stabilit se incarca la Adevărat ca stare implicită. Această proprietate este responsabilă pentru a determina dacă să se afișeze spinner-ul sau nu. Implicit, rotorul trebuie să fie vizibil pentru a indica faptul că pagina se încarcă.
getInitialState: funcția () return isLoading: true; ,
Apoi, facem componenta. La fel ca componenta elementului de știri, acesta are și un antet și un corp. Antetul conține un buton înapoi, titlul paginii și un spinner.
render: function () retur (); , This.truncate (this.state.pageTitle) this.state.isLoading &&
Organismul conține WebView componentă. WebView componenta are a URL-ul și onNavigationStateChange atribute. URL-ul este adresa URL care a fost transmisă de la Vezi pagina funcția în NewsItems componentă mai devreme. Deci, când se execută următorul cod:
this.props.navigator.push (nume: 'web_page', url: url);
renderScene metoda în index.android.js este, de asemenea, executat și URL-ul este trecut la el:
renderScene: funcție (rută, navigator) var Component = ROUTES [nume_trada]; întoarcere (); ,
Așa avem acces la URL, extras-o din recuzită: this.props.url.
Să ne întoarcem la atributele adăugate la WebView componentă. Avem onNavigationStateChange , care este folosit pentru specificarea funcției de executat ori de câte ori vizualizarea web navighează către o pagină nouă. Iata cum functioneaza aceasta functie:
onNavigationStateChange: funcție (navState) if (! navState.loading) this.setState (isLoading: false, pageTitle: navState.title); ,
Când se numește funcția de mai sus, funcția navState este transmisă ca argument. Aceasta conține informații despre starea curentă a vizualizării web, cum ar fi titlul paginii și dacă se încarcă sau nu în prezent. Acesta este locul perfect pentru actualizarea stării. Când pagina nu mai este încărcată, setăm se incarca la fals și setați o valoare pentru titlul paginii.
Apoi, avem înapoi funcție, ceea ce face ca navigatorul să se întoarcă la o pagină. Acest lucru devine apelat ori de câte ori utilizatorul fixează butonul din spate în antet.
înapoi: funcția () this.props.navigator.pop ();
trunchia funcția limitează lungimea a ceea ce este trecut în funcție. Utilizăm această funcție pentru a limita textul pentru titlul paginii paginii Web.
truncate: funcția (str) return _.truncate (str, 20); ,
Foaia de stil arată astfel:
var stiles = StyleSheet.create (container: flex: 1, webview_header: paddingLeft: 10, backgroundColor: '# FF6600', flex: 1, justifyContent: : paddingLeft: 10, paddingRight: 10, justifyContent: 'centru', webview_body: flex: 9, butonul: textAlign: 'stânga', culoare:'FFFF ', page_title: color:' #FFF ', spinner: alignItems:' flex-end ');
În cele din urmă, expuneți componenta la lumea exterioară:
module.exports = WebPage;
Pentru a rula aplicația, aveți nevoie de un dispozitiv Android sau de un emulator. Dacă doriți să utilizați un emulator, vă recomandăm să utilizați Genymotion. Puteți rula aplicația executând următoarea comandă:
reaction-native run-android
Această comandă instalează și lansează aplicația. Dar veți obține următoarea eroare dacă încercați să faceți acest lucru:
Acest lucru se datorează faptului că React Native se așteaptă ca serverul React să ruleze pe aparat. Serverul React compilează aplicația de fiecare dată când salvați modificările din editorul de text. reaction-native run-android comanda este utilizată numai pentru difuzarea aplicației în scopul testării și depanării aplicației. De aceea depinde de serverul React pentru compilarea efectivă a aplicației.
Pentru a scăpa de eroare, trebuie să rulați reactiv-nativ început comanda pentru a porni serverul. Acest lucru durează un timp pe prima rulare, dar când ajunge la partea în care se spune următoarele:
Graficul de dependență a clădirii (35135ms)
Puteți deschide o nouă fereastră de terminal în directorul de proiect și puteți executa adb shell introducere keyevent 82. Aceasta deschide meniul dezvoltatorului din dispozitiv sau emulator. Odată ce meniul este deschis, selectați dev setările apoi selectați debug server gazdă și port.
Aceasta deschide un prompt care vă cere să introduceți adresa IP și portul computerului. Aflați adresa IP internă a computerului și introduceți-o în proiecție împreună cu portul 8081, care este portul implicit pe care rulează serverul React. Cu alte cuvinte, dacă adresa dvs. IP este 192.168.254.254, apoi introduceți 192.168.254.254:8081.
După aceea, reveniți la meniul dezvoltatorului și selectați reload JS. Aceasta reîncarcă aplicația, astfel încât detectează instanța serverului React de execuție. Aplicația ar trebui să funcționeze fără probleme.
Dacă doriți să testați pe un dispozitiv iOS, urmați ghidul de pe site-ul React Native.
Am construit o aplicație cu cititor de știri destul de curată cu React Native. Ce urmeaza? Iată câteva idei dacă doriți să aflați mai multe despre React Native:
Asta e. În acest tutorial, ați învățat cum să lucrați cu React Native pentru a crea o aplicație pentru cititorii de știri care vorbește cu API-ul Hacker News. Dacă aveți întrebări, lăsați-le în comentariile de mai jos și voi încerca să vă răspund. Puteți găsi fișierele sursă ale acestui tutorial pe GitHub. Vă mulțumim pentru lectură.
