"Зенит-3D Отчет" кроссплатформенное приложение на React Native

Цель: Повысить имиджевую привлекательность стенда регулировки углов установки колес (РУУК) «Зенит 3D» путем добавления уникальной в нише стендов РУУК функции цифровизации отчетов при помощи мобильных устройств.

Требования к функционалу:

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

- Должна вестись история сканирований, т.е. отсканированные данные необходимо сохранять в XML-файл в виде:

- Дата сканирования;

- Данные QR-кода;

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

- Должна присутствовать возможность удаления (с запросом подтверждения) выбранной записи из истории.

- Требуется обеспечить импорт/экспорт истории из/в указанный пользователем каталог с целью переноса на другое мобильное устройство.

Наиболее интересной задачей для проекта Sivik Zenith-3D требовалось отобразить на экране отчёты сход-развала с возможностью приближения экрана. Для реализации такого поведения было произведено исследование библиотек, по результатом которого найдена библиотека react-native-easy-gestures.

Она представляет из себя новый компонент Gestures, который управляет нативными параметрами вложенного view через жесты пользователя и поддерживает приближение, поворот и перетаскивание содержимого.

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

Оно включает следующие функции:

• отключение возможности поворота содержимого,

• фиксация содержимого посередине экрана (с помощью Gestures можно было утянуть содержимое за рамки экрана),

• поддержка приближения по двойному нажатию,

• поддержка свайпа контента (нативное поведение ScrollView, при котором после резкого движения по экрану включается прокрутка содержимого по инерции),

• поддержка смены ориентации экрана.

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

• поддержка styles для контейнера содержимого,

• возможность настройки минимального и максимального приближения,

• возможность настройки количества уровней для приближения через двойное нажатие,

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

Результатом работы стала удобная библиотека для приближения в react-native https://www.npmjs.com/package/react-native-border-zoom-view, выложенная на NPM.

Поставленная задача была реализована в полном объеме и с результатом вы можете ознакомиться на видео.