React Native для B2B: как собрать приложение на iOS и Android одним кодом

React Native — открытый фреймворк для разработки мобильных приложений на JavaScript: один код одновременно собирается в приложение для iOS и для Android, а к камере, GPS и push-уведомлениям он обращается через нативные модули. Для бизнеса это значит одну команду разработчиков вместо двух и один цикл обновлений вместо параллельных релизов.

🧩 из чего состоит приложение на React Native

Экран в React Native собирается из компонентов на JavaScript и React: кнопка, список, форма ввода — те же принципы, что в вебе, только вместо HTML-тегов используются View, Text, Image. Компилятор превращает этот код в настоящие iOS- и Android-элементы интерфейса, а не в веб-страницу внутри приложения — в этом разница с WebView-обёртками, которые просто открывают сайт в контейнере. Там, где нужна работа с камерой, биометрией, Bluetooth-сканером или push-уведомлениями, подключается нативный модуль — небольшой кусок кода на Swift или Kotlin, который вызывается из общего JS-кода.

На практике это значит: основная часть экранов и бизнес-логики пишется один раз, а нативные вставки нужны только под специфичное железо. Ещё один эффект такой архитектуры: если в логике оформления заказа находится ошибка, её правят один раз, а не отдельно для iOS и отдельно для Android — версии платформ не расходятся между собой, и в приложении для iPhone не появляется функция, которой нет в версии для Android.

За последние версии React Native обновил внутренний механизм связи между JS-кодом и нативной частью — новая архитектура (Fabric) убирает часть задержек старого «моста» и делает работу со списками, анимацией и вводом текста более плавной. Для бизнес-приложений с таблицами остатков, длинными списками заказов или карточками товаров это ощущается напрямую: список не подтормаживает при прокрутке даже на бюджетных Android-устройствах, которые часто встречаются у выездных сотрудников.

React Native, Flutter, нативная разработка или WebView — что выбрать

Выбор технологии решает не мода, а то, что должно уметь приложение и кто будет его поддерживать через два года. Если в компании уже есть фронтенд-разработчики на React для сайта, React Native даёт им возможность писать и мобильное приложение без найма отдельной iOS- и Android-команды. Если нужна тяжёлая графика, анимация уровня игры или доступ к самым свежим функциям платформы в день релиза — ближе нативная разработка. Ниже — по каким критериям сравнивать варианты на старте проекта.

Для большинства учётных, складских и CRM-приложений в малом и среднем бизнесе разница между React Native и Flutter на выбор клиента почти не влияет — важнее, какой стек уже знает команда поддержки. А вот переход на нативную разработку ради мобильного каталога товаров или формы заявки обычно избыточен: тратится больше времени разработчика на одинаковый по сути экран, потому что его пишут дважды — отдельно под iOS и отдельно под Android.

как проходит разработка — от макета до публикации в сторах

Разработка на React Native идёт теми же этапами, что и любая мобильная разработка, но без раздвоения команды на iOS- и Android-часть.

1. ✓прототип и макеты экранов — фиксируется, что видит пользователь и какие данные ему нужны в каждый момент работы с приложением;
2. ✓разработка компонентов интерфейса и навигации на React Native, сборка общей логики приложения;
3. ✓подключение к бэкенду: собственному API или напрямую к 1С через HTTP-сервисы;
4. ✓тестирование на реальных устройствах iOS и Android — эмулятор не показывает, как приложение ведёт себя при слабом интернете на складе или в цехе;
5. ✓публикация в App Store и Google Play, включая прохождение модерации у каждой площадки.

внутреннее тестирование перед публикацией

Перед тем как отправлять сборку на модерацию, её обычно раздают ограниченному кругу сотрудников заказчика — через TestFlight на iOS и внутренний трек в Google Play на Android. Это отдельный шаг, который легко пропустить в спешке, но именно на нём находят половину замечаний: не тот шрифт, неудобная клавиатура на форме заказа, лишний экран подтверждения. Дешевле поправить это до отправки в стор, чем после публикации ждать новую модерацию.

Модерация App Store — отдельный риск: там чаще возвращают приложение на доработку, чем в Google Play, и время на повторную отправку стоит закладывать заранее, а не после первого отказа.

обновления без ожидания модерации в сторах

У React Native есть особенность, которой нет у полностью нативной разработки: JS-часть кода можно обновить и доставить на устройства пользователей отдельно от полноценного релиза в App Store и Google Play. Если ошибка не в нативном модуле, а в логике экрана или тексте формы, исправление уходит пользователям без повторной модерации — это ощутимо, когда нужно быстро поправить критичную ошибку в форме заказа, а не ждать несколько дней рассмотрения новой версии. Нативные изменения — новые разрешения, новые SDK, новые иконки — всё равно проходят обычный цикл публикации.

🔗 интеграция с 1С: сценарий, который просят чаще всего

Менеджер по продажам приезжает к клиенту без ноутбука, только с телефоном. Клиент спрашивает: «На складе есть десять паллет вот этого товара?» Менеджер звонит в офис и ждёт, пока бухгалтер откроет 1С и найдёт остаток, — клиент тем временем открывает сайт конкурента в соседней вкладке. Пока идёт звонок, сделка стынет, а конкурент отвечает быстрее.

Решает это не мобильное приложение само по себе, а связка: React Native-приложение на телефоне менеджера обращается к HTTP-сервисам 1С и в реальном времени показывает остатки, цены и историю заказов клиента. Заказ, оформленный на месте, сразу попадает в 1С — без повторного ввода и без «занесу вечером, если не забуду». Для складских и курьерских сценариев та же связка добавляет сканирование штрихкода и отметку о доставке прямо из приложения, а руководитель видит статус заказа в 1С раньше, чем курьер вернётся в офис. У сервисных компаний похожий сценарий строится вокруг выездных мастеров: заявка на ремонт создаётся в 1С, мастер получает её на телефон со всей историей обслуживания клиента, а закрывающие документы уходят обратно в базу сразу после визита, а не после того, как мастер доберётся до офиса и вспомнит детали.

Мы собираем такие приложения через разработку мобильных приложений и отдельно закрываем стык с учётной системой — от простого обмена остатками до полноценного B2B-приложения с 1С для отдела продаж или склада. Логика интеграции приложения с 1С обычно строится на стандартных HTTP-сервисах, которые 1С отдаёт без переписывания конфигурации с нуля.

когда React Native не подходит

Не любую задачу стоит решать через React Native. Игры и приложения с тяжёлой 3D-графикой, AR-примерочные, приложения для узкоспециализированного оборудования с редкими Bluetooth-протоколами — там нативная разработка отрабатывает быстрее и стабильнее, потому что не тратит ресурс на прослойку между JS-кодом и платформой. Если склад работает со старыми ТСД-терминалами без стандартного SDK, разработка нативного модуля под конкретную модель иногда занимает больше времени, чем вся остальная часть приложения. Ещё один честный момент: если в команде никто не работал с React или JavaScript, освоение фреймворка займёт время — в этом случае имеет смысл сравнить, что дешевле, обучение команды или разработка на подрядной основе.

Если приложение — это по сути мобильная витрина для той же 1С и больше ничего не требуется, кроме форм и справочников, иногда логичнее взять готовую 1С:Мобильную платформу — она работает ближе к самой базе и не требует отдельного слоя интеграции.

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

сколько стоит разработка на React Native и что входит в бюджет

Разработка мобильного приложения у нас начинается от 500 000 рублей — в эту сумму входит проектирование экранов, сборка приложения под iOS и Android на общей кодовой базе и настройка публикации в сторах. Итоговая цена зависит от числа экранов, глубины интеграции с 1С или другой учётной системой и от того, нужен ли отдельный бэкенд помимо самой 1С. Чем ближе техническое задание к готовой связке «мобильный интерфейс плюс данные из 1С», тем точнее оценка на старте и меньше доработок после запуска.

от чего зависит срок

Срок разработки растёт не столько от количества экранов, сколько от глубины интеграции: приложение с формами и справочниками собирается быстрее, чем приложение, которое должно синхронизировать остатки, цены, скидки и статусы заказов с 1С в реальном времени и корректно работать при обрыве связи на складе. На этапе оценки мы отдельно проговариваем, какие данные должны обновляться мгновенно, а какие можно синхронизировать раз в несколько минут, — это напрямую влияет на архитектуру и бюджет.

Полный расчёт смотрите в тарифах: там видно, из чего складывается стоимость разработки и последующего сопровождения приложения.

❓ Частые вопросы

Чем React Native отличается от нативной разработки на Swift и Kotlin?

Разница в кодовой базе: на React Native одна команда пишет один код для iOS и Android, а нативная разработка требует двух отдельных проектов и обычно двух команд. Интерфейс при этом остаётся настоящим нативным, а не веб-страницей в обёртке. К камере, GPS и другим функциям устройства приложение обращается через нативные модули.

Можно ли на React Native связать мобильное приложение с 1С?

Да, это одна из самых частых задач: приложение обращается к стандартным HTTP-сервисам 1С и получает остатки, цены, статусы заказов в реальном времени. Заявки, оформленные в приложении, попадают в 1С без повторного ввода. Такую интеграцию собирают и для отдела продаж, и для склада, и для выездных мастеров сервисной компании.

Сколько времени занимает разработка приложения на React Native?

Срок зависит не столько от числа экранов, сколько от глубины интеграции с 1С или другой учётной системой: приложение с формами и справочниками собирается быстрее, чем система с синхронизацией остатков и цен в реальном времени. Точный срок определяют на этапе оценки технического задания, а не по общей формуле.

Что выбрать для мобильного приложения — React Native или Flutter?

Для большинства бизнес-приложений — каталогов, CRM, заявок, складского учёта — разница между ними на конечный результат почти не влияет. React Native логичнее, если в компании уже есть фронтенд-разработчики на React для сайта: им не придётся осваивать язык Dart, на котором написан Flutter.

Будет ли приложение на React Native работать без интернета на складе?

Работу без сети закладывают отдельно на этапе проектирования: приложение сохраняет данные локально и досылает их в 1С, как только связь восстанавливается. Это не встроенная особенность фреймворка, а часть архитектуры конкретного приложения, которую нужно обсуждать заранее, если сотрудники работают в зонах со слабым сигналом.