Несмотря на все разговоры о будущем веб-приложений, мобильные приложения по-прежнему являются одним из самых простых способов связаться с вашими пользователями. Но создание и поддержка приложений для iOS, Android и Интернета может буквально утроить вашу рабочую нагрузку.
React Native решает эту проблему, помогая разработчикам создавать кроссплатформенные мобильные приложения, сокращая время и усилия. Таким образом, React Native — чрезвычайно популярный инструмент, используемый множеством компаний для упрощения рабочего процесса. Давайте посмотрим, как React Native достигает этого.
Что такое React Native?
React Native основан на популярном JavaScript-фреймворке React. Следовательно, люди, знакомые с основами React (состояния/реквизиты), могут легко перейти на React Native.
Поскольку React Native является кроссплатформенным, он помогает избежать использования отдельных баз кода для разных платформ. Он предоставляет компоненты и API-интерфейсы, которые служат строительными блоками для мобильного приложения.
Некоторые из основных компонентов React Native:
- Вид
- Текст
- Изображение
- ScrollView
- Таблица стилей
- Прикосновения
Разработчики, работающие с React Native, регулярно используют эти компоненты.
Разработчикам, которые плохо знакомы с разработкой мобильных приложений, рекомендуется использовать Expo CLI для более быстрой, простой и эффективной разработки приложений. Expo CLI — это фреймворк, созданный на основе React Native, который значительно упрощает начало разработки мобильных приложений.
Давайте посмотрим на React Native в действии вместе с Expo CLI. Мы будем создавать базовое приложение Todo для мобильных устройств. Мы будем использовать эмулятор Android для тестирования нашего приложения. Для начала давайте установим все необходимое программное обеспечение и пакеты.
Настройка нашей среды разработки
Сначала в терминале выполните следующую команду, чтобы глобально установить интерфейс командной строки Exponpm 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 мы создаем универсальный инструмент разработки, который ускоряет веб-разработку. Загляните к нам здесь.
Удачного кодирования!