Идея разработки мобильного приложения COVID-19 у меня возникла, когда я читал курс по Udemy (Полный курс React Native и Hooks) Стивена Грайдера. Это удивительный курс, особенно в пользу использования функциональных компонентов и хуков для управления состоянием.

Зачем это вообще нужно?

Вы спросите, зачем приложению искать такие данные, если я уже могу искать здесь, там и т.д. world, плюс у него были некоторые преимущества, например, эти данные являются последними, потому что они взяты из API, который обновляет их на основе бюллетеней государственной прессы, официальных (CM, Health M) дескрипторов, PBI, Press Trust of India, отчетов ANI. Как правило, они более свежие. А также я реализовал кнопку общего доступа, чтобы делиться данными в реальном времени с кем угодно. Плюс добавлены несколько советов по безопасности.

Одна болевая точка: я использовал для этого Expo! Это привело к тому, что размер приложения превысил 46 МБ! Просто потому, что я никогда не использовал RN-CLI до этого момента и был новичком в создании приложений с RN.

Приступим!

Я поискал в Интернете некоторые API-интерфейсы, которые предоставили бы мне данные, которые мне нужно показать. Я основал много на RapidAPI. Итак, для данных домашнего экрана я использовал этот API, а для данных StateWise по странам, Индии и Индии я использовал это. После того, как часть API заработала, я создал пользовательский интерфейс с помощью Adobe xd.

Итак, переходим к навигации, используемому стеку навигации React и навигатору ящиков. Навигатор по ящикам предназначен только для отображения страницы разработчика xD

Я установил несколько параметров DefaultNavigationOptions в моем navigator.js -

И с некоторым экраном BoilerPlate выглядит так:

Далее добавляем текст и стили -

Прежде чем создавать карты данных, давайте вызовем API и посмотрим, какой тип данных мы получаем. Для этого мы будем использовать Axios.

И в нашем HomeScreen-

Это ответ API -

Array [
  Object {
    "confirmed": 3857767,
    "critical": 48068,
    "deaths": 266080,
    "lastChange": "2020-05-07T14:44:55+02:00",
    "lastUpdate": "2020-05-07T14:45:03+02:00",
    "recovered": 1326769,
  },
]

Так что это просто, теперь добавьте переменную состояния, которая содержит все наши данные. И к нему можно легко получить доступ, написав data [0]. (Свойства).

Теперь давайте создадим карты с нашими данными -

И добавьте этот компонент на наш домашний экран, присвоив ему заголовок и реквизиты данных.

Обратите внимание, что я использую react-native-normalize, чтобы жестко запрограммированные значения реагировали на разные размеры экрана. Посмотрите этот замечательный пакет здесь

Результат -

Выглядит хорошо! , Но не хватает одного, простых чисел трудно читать. Так что давайте отформатируем их в соответствии с какой бы системой счисления вы ни придерживались, я выберу индийскую систему. После добавления кнопок стека, как на изображениях макетов, код выглядит как -

Похоже -

Элегантно! Теперь вы можете добавить другие экраны.

Я покажу вам еще один экран, то есть экран данных страны перед отъездом.

Этот.

Я покажу, как реализовать плоский список и работать с данными.

Ответ, который я получаю с помощью API, выглядит так: (это API)

[
{},{},{}
]

Массив объектов с данными о конкретной стране, идеально подходит для компонента FlatList!

Итак, это мой компонент FlatList, в который вложен компонент ‹DetailCountries /›. Которая принимает все реквизиты для данных конкретной страны.

А о SearchBar см. Эту статью. Обычно во время поиска мы изменяем состояние данных, которые передаются в FlatList, что вызывает их повторную визуализацию.

Вот и все! Довольно простая реализация вызовов API и обработки данных в вашем приложении React Native. Вот исходный код (перепутался xD)

PS. Не удалось опубликовать его в Play Маркете из-за государственных ограничений. Также нет поддержки iOS :(

Спасибо за прочтение.



pratyaksh123 / Vete_Corona
Кросс-платформенное приложение с открытым исходным кодом, построенное на react-native, вклад в этот фреймворк приветствуется! Некоторые из… github.com