de Mohammed Salman

Cum să construiești o aplicație de știri cu React Native

Cum sa construiesti o aplicatie de stiri cu React Native
App.js

Pentru prima mea postare pe Medium și am vrut să vă împărtășesc cum am creat o aplicație de știri cu React Native.

Postat inițial pe blogul meu.

Cerințe pentru construirea aplicației:

Dacă nu sunteți familiarizați cu aceste resurse, nu vă faceți griji – sunt destul de ușor de utilizat.

Subiectele pe care le vom aborda în postare sunt:

  • API News
  • Fetch API
  • FlatList
  • Trageți în jos pentru a reîmprospăta
  • Conectare

Și mai mult … deci să începem!

Puteți găsi repo-ul proiectului aici

API News

Un API simplu și ușor de utilizat care returnează metadatele JSON pentru titluri și articole în direct pe web chiar acum. – NewsAPI.org

În primul rând, ar trebui să mergeți mai departe și să vă înscrieți la News Api pentru a obține gratuit apiKey (cheia dvs. de autentificare).

Creați un nou proiect React Native și chemați-l news_app (sau ce vrei tu). În directorul proiectului, creați un folder nou și apelați-l src . În src director, creați un folder și denumiți-l components . Deci, directorul de proiect ar trebui să arate cam așa:

1611083824 102 Cum sa construiesti o aplicatie de stiri cu React Native
directorul proiectului

În src folder, creați un fișier nou numit news.js . În acest fișier vom prelua JSON care conține titlurile din API-ul Știri.

news.js

Asigurați-vă că înlocuiți YOUR_API_KEY_HERE cu propria cheie API. Pentru mai multe informații despre API-ul Știri, accesați newsapi docs.

Acum declarăm getNews funcție, care va prelua articolele pentru noi. Exportați funcția, astfel încât să o putem folosi în App.js fişier.

App.js

În constructor, definim starea inițială. articles ne va stoca articolele după ce le vom prelua și refreshing ne va ajuta în reîmprospătarea animației. Observați că am setat refreshing bool la adevărat, pentru că atunci când pornim aplicația, vrem ca animația să înceapă în timp ce încărcăm articolele (titluri de știri).

componentDidMount este invocat imediat după montarea unei componente. În interiorul ei îl numim fetchNews metodă.

componentDidMount() {  this.fetchNews();}

În fetchNews noi sunam getNews() care returnează o promisiune. Deci folosim .then() metoda care preia o funcție de apel invers, iar funcția de apel invers are un argument (articolele).

Acum atribuiți articolele din stat argumentului articole. Am tastat doar articles pentru că este o nouă sintaxă ES6 ceea ce înseamnă { articles: articles } , și am stabilit refreshing la fals pentru a opri animația spinner.

fetchNews() {  getNews().then(      articles => this.setState({ articles, refreshing: false })  ).catch(() => this.setState({ refreshing: false }));}

.catch() se apelează în cazurile respinse.

handleRefresh metoda va porni animația spinner și va apela fetchNews() metodă. Trecem () => this.fetchNews (), deci este apelat imediat după ce atribuim statul.

handleRefresh() {  this.setState({ refreshing: true },() => this.fetchNews());}

În interiorul metodei de redare, returnăm un FlatList componentă. Apoi trecem câteva recuzită. data este gama de articole din this.state . renderItem are o funcție pentru a reda fiecare element din matrice, dar în cazul nostru returnează doar Article componentă pe care am importat-o ​​mai devreme (vom ajunge la ea). Și trecem articolul de articol ca un accesoriu pentru a fi utilizat ulterior în acea componentă.

Articolul.js

În src / components creați un fișier JavaScript nou și apelați-l Articolul.js

Să începem prin instalarea a două biblioteci simple folosind npm: react-native-elements, ceea ce ne dă câteva prefabricat componente pe care le-am putea folosi și moment care se va descurca cu timpul nostru.

Instalați-le folosind npm:

npm install --save react-native-elements moment

În Articolul.js:

Se întâmplă multe aici. În primul rând, începem destructurare article prop și a styles obiect definit sub clasă.

În interiorul metodei de redare, definim constanta de timp pentru a stoca ora la care a fost publicat articolul. Folosim biblioteca de moment pentru a converti data în timpul a trecut de atunci, și trecem publishedAt sau timp de acum dacă publishedAt este null.

defaultImg i se atribuie o adresă URL a imaginii în cazul în care adresa URL a imaginii articolului este nulă.

Metoda de redare revine TouchableNativeFeedback de manipulat atunci când utilizatorul apasă cardul. Îi transmitem câteva recuzite: useForground , care spune elementului să folosească primul plan atunci când afișează efectul de ondulare pe card și onPress , care preia o funcție și o execută atunci când utilizatorul apasă cardul. Am trecut () => Linking.openUrl(url), care va deschide pur și simplu adresa URL a articolului complet atunci când apăsăm cardul.

Cartea are trei elemente de recuzită: featuredTitle , care este un titlu plasat peste imagine, featuredTitleStyle să o coafeze și image care este imaginea articolului din articolul prop. În caz contrar, dacă este null , va fi defaultImg .

..  featuredTitle={title}  featuredTitleStyle={featuredTitleStyle}  image={{ uri: urlToImage || defaultImg }}..

În ceea ce privește elementul text, acesta va conține descrierea articolului.

<Text style={{ marginBottom: 10 }}>{description}</Text>

Am adăugat un separator pentru a separa descrierea de ora și numele sursei.

<Divider style={{ backgroundColor: '#dfe6e9' }} />

Sub Divider , noi avem un View care conține numele sursei și momentul publicării articolului.

..<View   style={{ flexDirection: ‘row’, justifyContent: ‘space-between’ }} >   <Text style={noteStyle}>{source.name.toUpperCase()}</Text>  <Text style={noteStyle}>{time}</Text></View>..

După class, am definit stilurile pentru aceste componente.

Acum, dacă rulăm aplicația:

Cum sa construiesti o aplicatie de stiri cu React Native
aplicația noastră de știri
1611083825 648 Cum sa construiesti o aplicatie de stiri cu React Native
trageți în jos pentru a reîmprospăta

Gata! Codul sursă pentru aplicație este disponibil pe GitHub: AICI, simțiți-vă liber să o bifurcați.

Sper că ți-a plăcut articolul meu! Dacă aveți întrebări, nu ezitați să comentați sau să mă contactați stare de nervozitate si cu siguranta te voi ajuta 🙂

? Bmă ai o cafea?

Povestea următoare? Hsă creați aplicații native pentru desktop cu JavaScript