Продолжаем эксперименты с React Native

В конце 2017-го года мы завершили очередной проект по мобильной разработке. На этот раз предстояло сделать сразу два приложения:

  • нативное Android приложение для интеграции с «умным» денежным ящиком;
  • кросс-платформенное React Native приложение для денежных переводов.

Но обо всём по порядку.

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

Ранее нам уже приходилось делать интеграцию с «умными» денежными ящиками от шведского производителя CashBow AB в рамках проекта мобильная касса. В данном приложении имеется два режима: администраторский и пользовательский. В рамках первого приложение позволяет настроить подключение к денежному ящику и задать некоторые настройки. В пользовательском режиме приложение работает как терминалы Qiwi — если клиент зарегистрирован в системе, то он может пополнять свой кошелек, привязанный к номеру телефона.

Если первое приложение предназначено для пополнения кошелька и работы с наличными, то второе приложение призвано облегчить отправку денег между клиентами сервиса. В качестве инструмента-сборщика проекта использовался Expo, который помимо основной своей функции (сборки/запуска React Native проекта на iOS и Android платформах) имеет API для взаимодействия с нативными функциями платформы, на которой он запущен, причем для обоих платформ код будет одинаков. Конкретно в этом проекте нами использовались API для получение разрешений (Premissions) и взаимодействие со списком контактов (Contacts).

  

Особых сложностей приложение не вызвало, однако были некоторые нюансы при верстке:
1) дизайн полей ввода текста сильно отличался от того, что предоставляется «из коробки». Главная проблема — в нём надо было отображать иконку и текст разного размера. Поэтому нам пришлось создавать свои собственные элементы путем наслоения нескольких объектов — сначала располагается TextInput, а над ним объект-placeholder (в нашем случае это текст, в котором используется шрифт разных размеров). При нажатии пользователем на наш Input, объект-placeholder скрывается, а в TextInput передаётся событие onFocus для того, чтобы пользователь мог начать вводить текст. При отсутствии текста и потере фокуса всё происходит в обратном порядке и объект-placeholder виден снова;

 

2) на некоторых экранных формах элементы должны были иметь тени — в Android параметрах/стилях для стандартных компонентов есть только параметр evaluation, который приподнимает объект по zIndex и под ним видна тень, но со всех сторон сразу, в нашем случае же тень должна была отбрасываться только с права и снизу. Данную проблему мы решили с помощью наложения нескольких объектов друг на друга — сначала создается корневой контейнер который отбрасывает тень во все стороны, поверх него еще один, но со смещением влево и вверх;