Як створити додаток для новин за допомогою React Native

Для мого першого допису на Medium, і я хотів поділитися з вами, як я створив додаток для новин з React Native.

Спочатку розміщений у моєму блозі.

Вимоги до побудови програми:

  • Базове розуміння JavaScriptмова .
  • Встановлення: Node.js, реагуйте рідно, використовуючи npm.
  • Використовувані бібліотеки: момент, реакція-рідна, реакція-рідна-елементи.

Якщо ви не знайомі з цими ресурсами, не хвилюйтеся - ними досить просто користуватися.

Темами, які ми розглянемо у дописі, є:

  • API новин
  • Fetch API
  • FlatList
  • Потягніть вниз, щоб оновити
  • Пов’язування

І більше ... тож давайте почнемо!

Ви можете знайти репо проекту тут

API новин

Простий і простий у використанні API, який повертає метадані JSON для заголовків та статей, що зараз є в Інтернеті. - NewsAPI.org

По-перше, вам слід підписатися на News Api, щоб отримати безкоштовний apiKey( ваш ключ автентифікації ).

Створіть новий проект React Native і зателефонуйте йому news_app(або як завгодно). У каталозі проекту створіть нову папку та зателефонуйте їй src. У src каталозі створіть папку з назвою components. Отже, ваш каталог проекту повинен виглядати приблизно так:

У src папці створіть новий файл із назвою news.js. У цьому файлі ми збираємося отримати JSON, який містить заголовки з API новин.

news.js

Не забудьте замінити YOUR_API_KEY_HERE на власний ключ API. Щоб отримати додаткову інформацію про API новин, перейдіть наnewsapi документи .

Тепер ми оголошуємо getNews функцію, яка збирається отримати статті для нас. Експортуйте функцію, щоб ми могли використовувати її у своєму App.jsфайлі.

App.js

У конструкторі ми визначаємо початковий стан. articles буде зберігати наші статті після того, як ми їх отримаємо, і refreshingдопоможе нам в оновленні анімації.Зверніть увагу, що я встановив значення refreshing bool на true, тому що коли ми запускаємо програму, ми хочемо, щоб анімація запускалася, поки ми завантажуємо статті (заголовки новин).

componentDidMountвикликається відразу після монтажу компонента. Усередині нього ми називаємо fetchNewsметод.

componentDidMount() { this.fetchNews();}

У fetchNewsми дзвонимо, getNews()що повертає обіцянку. Отже, ми використовуємо .then()метод, який приймає функцію зворотного виклику, а функція зворотного виклику бере аргумент ( статті ).

Тепер призначте статті в штаті аргументу статей. Я набрав лише articlesтому, що це новий синтаксис ES6, що означає { articles: articles }, і ми встановили refreshing значення false, щоб зупинити анімацію обертання .

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

.catch()називається у відхилених справах.

handleRefreshметод збирається запустити анімацію обертання та викликати fetchNews()метод. Ми передаємо () => this.fetchNews (), тому він викликається відразу після призначення стану.

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

Усередині методу візуалізації ми повертаємо FlatListкомпонент. Потім ми передаємо кілька реквізиту. data- масив статей з this.state. renderItemПриймає функцію для відображення кожного елемента в масиві, але в нашому випадку він просто повертає Articleкомпонент , який ми імпортовані раніше (ми повернемося до нього). І ми передаємо елемент статті як підказку для подальшого використання в цьому компоненті.

Article.js

У src / components створіть новий файл JavaScript і назвіть його Article.js

Почнемо з установки двох простих бібліотек за допомогою npm:реагувати-рідні-елементи , що дає нам певний готовий результаткомпоненти, які ми могли б використовувати, і момент, який обробить наш час.

Встановіть їх за допомогою npm:

npm install --save react-native-elements moment

У Article.js:

Тут багато що відбувається. Спочатку ми починаємо з деструктуризації article prop та styles об’єкта, визначеного нижче класу .

Усередині методу візуалізації ми визначаємо постійну часу для збереження часу публікації статті. Ми використовуємо бібліотеку моментів, щоб перетворити дату на час, що минув з тих пір , і ми передаємо publishedAtабо час відтепер, якщо publishedAtє null.

defaultImg присвоюється URL-адреса зображення, якщо URL-адреса зображення статті є нульовою.

Метод візуалізації повертається TouchableNativeFeedbackдо обробки, коли користувач натискає карту. Ми передаємо йому деякий реквізит:, useForgroundякий повідомляє елементу використовувати передній план при відображенні ефекту пульсації на картці, і onPress, який приймає функцію та виконує її, коли користувач натискає на карту. Ми передали () => Linking.openUrl(url), який просто відкриє URL-адресу цілої статті, коли ми натискаємо на картку.

Картка бере три реквізити:, featuredTitle який є заголовком, розміщеним над зображенням, featuredTitleStyle для його стилізації, а imageтакож зображенням статті з реквізиту статті. В іншому випадку, якщо це null, це буде defaultImg.

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

Що стосується елемента тексту, він міститиме опис статті.

{description}

Ми додали розділювач, щоб відокремити опис відtime 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