Како направити апликацију за вести помоћу Реацт Нативе-а

За свој први пост на Медиум-у, и желео сам да поделим са вама како сам направио апликацију за вести са Реацт Нативе-ом.

Првобитно објављено на мом блогу.

Захтеви за изградњу апликације:

  • Основно разумевање ЈаваСцрипт-ајезик .
  • Инсталирајте: Ноде.јс, реагујте нативни користећи нпм.
  • Коришћене библиотеке: момент, реагирај-завичајно, реагује-завичајно-елементи.

Ако нисте упознати са овим ресурсима, не брините - они су прилично једноставни за употребу.

Теме које ћемо обрађивати у посту су:

  • АПИ за вести
  • Фетцх АПИ
  • ФлатЛист
  • Повуците доле да освежите
  • Повезивање

И још ... па кренимо!

Извештај о пројекту можете пронаћи овде

АПИ за вести

Једноставан и лак за употребу АПИ који тренутно враћа ЈСОН метаподатке за наслове и чланке уживо широм веба. - НевсАПИ.орг

Прво би требало да се пријавите за Невс Апи да бисте добили свој бесплатни apiKey( ваш кључ за потврду идентитета ).

Направите нови Реацт Нативе пројекат и позовите га news_app(или како већ желите). У директоријуму пројекта направите нову фасциклу и позовите је src. У src директоријуму креирајте фасциклу са именом components. Дакле, ваш директоријум пројекта би требао изгледати отприлике овако:

У src фасцикли креирајте нову датотеку под називом news.js. У овој датотеци ћемо преузети ЈСОН који садржи наслове из АПИ-ја за вести.

невс.јс

Обавезно замените ИОУР_АПИ_КЕИ_ХЕРЕ својим АПИ кључем. За више информација о АПИ-ју за вести идите наневсапи доцс .

Сада изјављујемо getNews функцију која ће нам донијети чланке. Извезите функцију како бисмо је могли користити у нашој App.jsдатотеци.

Апп.јс

У конструктору дефинишемо почетно стање. articles ће чувати наше чланке након што их преузмемо и refreshingпомоћи ће нам у освежавању анимације.Приметите да сам вредност refreshing боол поставио на труе, јер када покренемо апликацију, желимо да анимација почне док учитавамо чланке (наслови вести).

componentDidMountпозива се одмах након монтирања компоненте. Унутар ње називамо fetchNewsметоду.

componentDidMount() { this.fetchNews();}

У fetchNewsпозиву getNews()који враћа обећање. Дакле, користимо .then()методу која узима функцију повратног позива, а функција повратног позива узима аргумент ( чланке ).

Сада доделите чланке у држави аргументу за чланке. Откуцао сам само articlesзато што је то нова ЕС6 синтакса што значи { articles: articles }и поставили смо refreshing на фалсе да зауставимо спиннер анимацију.

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

.catch()позива се у одбијеним случајевима.

handleRefreshметода ће покренути спиннер анимацију и позвати је fetchNews(). Пролазимо () => this.fetchNewс (), па се позива одмах након што доделимо стање.

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

Унутар методе приказа, враћамо FlatListкомпоненту. Затим прођемо неке реквизите. dataје низ чланака из this.state. renderItemУзима функцију да пружи сваку ставку у низу, али у нашем случају то само враћа Articleкомпоненту смо раније увезена (ћемо доћи до ње). И предајемо ставку чланка као реквизит за касније коришћење у тој компоненти.

Артицле.јс

У срц / цомпонентс креирајте нову ЈаваСцрипт датотеку и назовите је Артицле.јс

Почнимо са инсталирањем две једноставне библиотеке помоћу нпм:реаговати-завичајни-елементи , што нам даје неке готовекомпоненте које бисмо могли користити и тренутак који ће се носити са нашим временом.

Инсталирајте их помоћу нпм:

npm install --save react-native-elements moment

У Артицле.јс:

Овде се много тога догађа. Прво започињемо деструктурирањем article пропа и styles објекта дефинисаног испод класе .

Унутар методе приказивања дефинишемо временску константу за чување времена објављивања чланка. Библиотеку тренутака користимо за претварање датума у време протекло од тада , а прослеђујемо publishedAtили време од сада ако publishedAtјесте null.

defaultImg додељује се УРЛ слике у случају да је УРЛ слике чланка нулл.

Метода приказивања враћа се TouchableNativeFeedbackна руковање када корисник притисне картицу. Пролазимо са неким реквизитима:, useForgroundкоји поручују елементу да користи први план када приказује ефекат мрешкања на картици и onPressкоји узима функцију и извршава је када корисник притисне картицу. Прошли смо () => Linking.openUrl(uрл), који ће једноставно отворити УРЛ целог чланка када притиснемо картицу.

Картица узима три реквизита:, featuredTitle који је наслов постављен преко слике, featuredTitleStyle да би је обликовао и imageкоја је слика чланка из реквизита чланка. Иначе, ако nullјесте, биће то defaultImg.

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

Што се тиче елемента текста, у њему ће бити опис чланка.

{description}

Додали смо преграду да бисмо одвојили опис одвреме и назив извора .

Испод Dividerимамо документ Viewкоји садржи име извора и време објављивања чланка.

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

Након тога class, дефинисали смо стилове за ове компоненте.

Сада ако покренемо апликацију:

Ето га! Изворни код апликације доступан је на ГитХуб-у: ОВДЕ, слободно га раширите.

Надам се да вам се свидео мој чланак! Ако уопште имате било каквих питања, слободно коментирајте или ме контактирајте на твиттеру и сигурно ћу вам помоћи :)

? Купи ми кафу?

Следећа прича? Како направити ЈаваСцрипт матичне апликације за радне површине