Hogyan készítsünk híralkalmazást a React Native alkalmazással

Programozás

A Medium-on írt első bejegyzésemhez meg akartam osztani veletek, hogyan készítettem egy híralkalmazást a React Native-nal.

Eredetileg a blogomon tették közzé.

Az alkalmazás felépítésének követelményei:

  • A JavaScript alapvető ismeretenyelv .
  • Telepítés: Node.js, natív reagálás az npm használatával.
  • Használt könyvtárak: pillanat, reakció-natív, reakció-natív elemek.

Ha nem ismeri ezeket az erőforrásokat, ne aggódjon - használatuk meglehetősen egyszerű.

A bejegyzésben szereplő témák a következők:

  • News API
  • Fetch API
  • FlatList
  • Húzza le a frissítéshez
  • Összekapcsolás

És még sok más ... szóval kezdjük!

A projekt repót itt találja

News API

Egyszerű és könnyen használható API, amely a címsorok és cikkek JSON-metaadatait jeleníti meg az interneten. - NewsAPI.org

Először is, regisztrálnia kell a News Api szolgáltatásba, hogy megkapja az ingyenes apiKey( hitelesítési kulcsot ).

Hozzon létre egy új React Native projektet, és hívja meg news_app(vagy ahogy csak akarja). Hozzon létre egy új mappát a projekt könyvtárban, és hívja meg src. A src könyvtárban hozzon létre egy mappát annak nevével components. Tehát a projektkönyvtárának ilyennek kell kinéznie:

src Hozzon létre egy új fájlt a mappában news.js. Ebben a fájlban be fogjuk tölteni a JSON-t, amely tartalmazza a News API címsorait.

news.js

Győződjön meg arról, hogy a YOUR_API_KEY_HERE-t saját API-kulccsal cserélte le. További információ a News API-ról:newsapi docs .

Most deklaráljuk azt a getNews függvényt, amely be fogja tölteni a cikkeket nekünk. Exportálja a függvényt, hogy használni tudjuk a App.jsfájlunkban.

App.js

A konstruktorban meghatározzuk a kezdeti állapotot. articles cikkeket tárolja, miután behoztuk őket, és refreshingsegítenek az animáció frissítésében.Figyelje meg, hogy a refreshing bool értéket igazra állítottam, mert amikor elindítjuk az alkalmazást, azt szeretnénk , hogy az animáció elinduljon, miközben betöltjük a cikkeket (hírek címsorai).

componentDidMountaz alkatrész felszerelése után azonnal meghívásra kerül. Belül a fetchNewsmódszert hívjuk .

componentDidMount() { this.fetchNews();}

A fetchNewshívásban, getNews()amely ígéretet ad vissza. Tehát azt a .then()módszert használjuk, amely visszahívási függvényt vesz fel, és a visszahívás függvény argumentumot vesz fel ( a cikkek ).

Most rendelje hozzá a cikkeket az állapotban a cikkek argumentumhoz. Csak articlesazért gépeltem, mert ez egy új ES6 szintaxis, ami azt jelenti { articles: articles }, és refreshing hamisra állítottuk a fonó animáció leállítását.

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

.catch()elutasított esetekben hívják.

handleRefreshA method elindítja a fonó animációt és meghívja a fetchNews()metódust. Elhaladunk () => this.fetchNews () -en , tehát az állapot hozzárendelése után azonnal meghívásra kerül.

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

A renderelési módszeren belül egy FlatListkomponenst adunk vissza . Aztán elhaladunk néhány kellék mellett. dataa cikkek tömbje a this.state. A renderItemtakes függvény minden elem megjelenítéséhez a tömbben, de esetünkben csak a Articlekorábban importált komponenst adja vissza (ráérünk rá). És átadjuk a cikk cikkét, mint javaslatot, amelyet később az adott összetevőben használhatunk.

Article.js

Az src / components alatt hozzon létre egy új JavaScript fájlt, és hívja cikk.js néven

Kezdjük két egyszerű könyvtár telepítésével az npm használatával:reagál-bennszülött-elemek , ami némi előkészületet ad nekünkkomponensek, amelyeket használhatunk, és az a pillanat, amely kezeli az időnket.

Telepítse őket az npm használatával:

npm install --save react-native-elements moment

Az Article.js-ben:

Sok minden történik itt. Először a article prop és az osztály alatt definiáltstyles objektum megsemmisítésével kezdjük .

A renderelési módszeren belül meghatározzuk az időállandót a cikk megjelenési idejének tárolására. Mi használjuk a pillanatban könyvtár konvertálni a dátumot a idő eltelt azóta , és átadjuk publishedAt, vagy idő múlva , ha publishedAtvan null.

defaultImg kép URL-t rendel hozzá, ha a cikk képének URL-címe null.

A renderelési módszer visszatér TouchableNativeFeedbacka kezelésre, amikor a felhasználó megnyomja a kártyát. Átadunk neki néhány props: -t useForground, amely megmondja az elemnek, hogy használja az előteret, amikor megjeleníti a hullámzás effektust a kártyán, és onPressamely egy függvényt vesz fel és végrehajtja, amikor a felhasználó megnyomja a kártyát. Elhaladtunk az () => Linking.openUrl(url) -en, amely a kártya megnyomásakor egyszerűen megnyitja a teljes cikk URL-jét.

A kártyának három kelléke van:, featuredTitle amely a kép fölé helyezett cím, featuredTitleStyle annak stílusa, és imageamely a cikk képe a cikk-kellékből. Ellenkező esetben, ha az null, akkor az lesz defaultImg.

.. featuredTitle={title} featuredTitleStyle={featuredTitleStyle} image={ defaultImg }..

Ami a szöveg elemet illeti, benne lesz a cikk leírása.

{description}

Elválasztót adtunk a leírás elválasztásáhoztime and source name.

Below the Divider , we have a View that contains the source name and the time the article was published.

.. {source.name.toUpperCase()} {time}..

After the class, we defined the styles for these components.

Now if we run the app:

There you go! The source code for the app is available on GitHub: HERE, feel free to fork it.

I hope you enjoyed my article! If you have any questions at all, feel free to comment or reach me on twitter and I will definitely help :)

?Buy me a coffee?

Next Story ?How to build native desktop apps with JavaScript