Виктор кинько

ZoomHandler для React Native

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

Виктор Кинько

Android-разработчик

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Спасибо за внимание!