Несмотря на все разговоры о будущем веб-приложений, мобильные приложения по-прежнему являются одним из самых простых способов связаться с вашими пользователями. Но создание и поддержка приложений для iOS, Android и Интернета может буквально утроить вашу рабочую нагрузку.

React Native решает эту проблему, помогая разработчикам создавать кроссплатформенные мобильные приложения, сокращая время и усилия. Таким образом, React Native — чрезвычайно популярный инструмент, используемый множеством компаний для упрощения рабочего процесса. Давайте посмотрим, как React Native достигает этого.

Что такое React Native?

React Native основан на популярном JavaScript-фреймворке React. Следовательно, люди, знакомые с основами React (состояния/реквизиты), могут легко перейти на React Native.

Поскольку React Native является кроссплатформенным, он помогает избежать использования отдельных баз кода для разных платформ. Он предоставляет компоненты и API-интерфейсы, которые служат строительными блоками для мобильного приложения.

Некоторые из основных компонентов React Native:

  1. Вид
  2. Текст
  3. Изображение
  4. ScrollView
  5. Таблица стилей
  6. Прикосновения

Разработчики, работающие с React Native, регулярно используют эти компоненты.

Разработчикам, которые плохо знакомы с разработкой мобильных приложений, рекомендуется использовать Expo CLI для более быстрой, простой и эффективной разработки приложений. Expo CLI — это фреймворк, созданный на основе React Native, который значительно упрощает начало разработки мобильных приложений.

Давайте посмотрим на React Native в действии вместе с Expo CLI. Мы будем создавать базовое приложение Todo для мобильных устройств. Мы будем использовать эмулятор Android для тестирования нашего приложения. Для начала давайте установим все необходимое программное обеспечение и пакеты.

Настройка нашей среды разработки

Сначала в терминале выполните следующую команду, чтобы глобально установить интерфейс командной строки Expo
npm install -g expo-cli

Мы будем использовать мобильное приложение Expo (доступно как для Android, так и для iOS) для имитации нашего приложения на мобильном устройстве.

Создание нового выставочного проекта

В терминале выполните команду

expo init <project name>

Это создаст базовый проект (так же, как create-react-app), который мы можем использовать для создания нашего приложения. На данный момент мы можем просто запустить приложение, чтобы проверить наши настройки, следуя приведенным ниже инструкциям.

Запустите cd todoapp, чтобы изменить каталог.

Запустите приложение, выполнив

expo start

Как только приложение запустится, вы сможете получить доступ к меню выставки через локальный хост.

Оттуда вы можете найти ряд вариантов для тестирования вашего приложения, в том числе:

  • Запуск в веб-браузере
  • Запуск в симуляторе iOS или Android
  • Сканирование QR-кода с устройства с установленным приложением expo

Хотя могут быть некоторые задержки в зависимости от того, как вы это делаете, Expo, как правило, довольно проста в том, что позволяет вам протестировать ваше приложение.

Создание нашего приложения ToDo

Мы отредактируем файл App.js и добавим дополнительные компоненты для создания нашего приложения. Исходный код App.js можно найти ниже.

App.js содержит:

  • Импорт — для импорта необходимых библиотек, собственных и пользовательских компонентов.
  • Функция — наша функция приложения будет содержать весь код.
  • Основные компоненты — основные компоненты React Native, такие как View, ScrollView и TouchableOpacity.
  • Пользовательский компонент. Как и в React, мы можем создавать собственные пользовательские компоненты и использовать их внутри App.js путем импорта. Мы используем один пользовательский компонент под названием Task, написанный внутри Task.js. Источник находится ниже

Состояния и реквизиты. Как и в React, мы будем использовать useState и передавать реквизиты нашему компоненту Task.

Вот оно!

Мы создали наше первое мобильное приложение с использованием React Native и Expo CLI и протестировали его на нашем мобильном устройстве.

В Codesphere мы создаем универсальный инструмент разработки, который ускоряет веб-разработку. Загляните к нам здесь.

Удачного кодирования!