Автор: Бен Гур Мартинс Карвалью, инженер по гибкому программному обеспечению, TribalScale

📫 Подпишитесь, чтобы получать наш контент здесь.

💬 Есть вопросы о наших возможностях разработки? Нажмите здесь, чтобы пообщаться с одним из наших экспертов!

Недавно я создал свою первую нативную библиотеку, поле, которое позволяет пользователю приложения подписывать пальцем и возвращает массив строк с путем созданного SVG. Он отображает подпись и позволяет сохранить ее в базе данных. Вы можете проверить это на npm: react-native-signing-field, его легко установить и использовать.

Я подумал, что с той же концепцией было бы здорово улучшить и создать простое приложение на основе холста с такими параметрами, как выбор цвета и размера штриха. Вот результат:

Сначала давайте рассмотрим концепцию создания SVG, а затем мы можем переходить к компоненту за компонентом.

Запуск проекта

Для этого приложения мы будем использовать react-native-svg и react-native-reanimated, оба требуют дополнительных действий после установки с помощью npm или yarn. Я рекомендую вам взглянуть на документы, указанные выше, и установить их в недавно созданное приложение.

SVG-пути

SVG могут быть разных форм, но здесь мы рассматриваем только линии или штрихи без заливки между ними, и мы можем управлять шириной штриха и цветом штриха.

Каждый путь (или строка) будет массивом строк, поэтому, когда пользователь впервые коснется экрана, мы зафиксируем это событие, возьмем координаты экрана (x и y) и начнем строить этот путь, и с каждым обновлением этой координаты (когда пользователь фактически проводит пальцем по экрану) мы будем добавлять в этот путь больше данных.

Путь начинается с буквы M, а каждый следующий сегмент будет начинаться с буквы L. Итак, если пользователь запустит жест в разделе x: 100 и y: 100, наш первый сегмент будет таким:

["M 100 100"]

Теперь пользователь проводит пальцем вниз к разделу x: 105 и y: 100, наш путь изменится на:

["M 100 100", "L 105 100"]

Код

Это довольно простое приложение, в основном у нас есть два компонента. Сначала мы посмотрим на плавающую панель настроек, затем на холст.

Панель настроек

Для панели настроек начнем со стилей по умолчанию:

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

Следующий компонент — это маленький кружок, где мы видим штрихи разного размера:

И объявим константы, которые мы будем использовать для основного компонента настроек:

И основной компонент настроек:

Давайте проверим этот компонент по частям:

  • Props (2–5): цвета и размер управляются родительским компонентом, поэтому само значение и сеттер будут переданы как свойства.
  • Состояния (8–9): мы сохраняем состояние open/closed внутри этого компонента, в случае, если мы хотим разделить его на два, мы должны передать это состояние через свойства, учитывая, что мы не можем держите оба открытыми.
  • Константы (11–12): состояние, полученное из открытого/закрытого состояния, которое дает нам текущую ширину каждого из контейнеров селектора.
  • Анимированные стили (14–25): для каждого контейнера мы также передаем эти анимированные стили, которые оживят действие открытия/закрытия. Вы можете видеть, что мы используем withTiming для облегчения перехода обновление ширины.
  • Обработчики селекторов (27–34): для каждого из них мы обрабатываем выбор значения, потому что мы не только вызываем сеттер, переданный реквизитами, но также обновляем наше открытое/закрытое состояние.
  • Обработчики открытия/закрытия (36–43): у этого есть специальный обработчик, который не обновляется напрямую, потому что мы хотим также закрыть другой контейнер.
  • Компонент (45–94): по сути, это два компонента, скрепленных вместе (да, я знаю, что на них не хватает ключа 😅). У каждого есть Animated.View с анимациями, которые мы объявили ранее, и внутри каждого мы покажем, если он закрыт, только предварительный просмотр того значения, которое мы выбрали (цвет или размер), или, если он открыт, мы показать возможные выбираемые значения.

Результат:

Холст

Теперь, в последней части, мы рассмотрим реализацию логики холста, чтобы лучше понять ее, давайте сначала посмотрим на тип пути:

export type PathType = {
  path: string[];
  color: string;
  stroke: number;
};

Как упоминалось ранее, у нас есть массив строк, который дает нам каждую позицию, которую прошла обводка, затем у нас есть цвет, выбранный в момент, когда мы начали обводку, а также ширина обводки. Это тип каждого пути, и мы будем хранить состояние нескольких путей.

Подробнее о каждой части этого кода:

  • setNewPath: функция, которая вызывается первой при начале движения, мы обновляем состояние пути, создавая новый элемент в массиве путей.
  • updatePath: сначала я получаю последний путь, который у нас есть, добавляя новый путь в массив строк. Затем я обновляю состояние новым обновленным путем и удаляю предыдущий, обводка и цвет здесь не меняются.
  • Компонент (представление): здесь наш компонент начинается с простого представления, которое использует необычные свойства, первые два свойства (onStartShouldSetResponder, onMoveShouldSetResponder) будут информировать о том, что наше представление будет отслеживать движения при первом запуске. и при обновлении. Затем у нас есть два других реквизита (onResponderStart, onResponderMove), которые получают аргумент события, содержащий позицию x и y.
  • Компонент (SVG). Здесь мы начинаем с пустого SVG, который повторно отображается с одним или несколькими путями в зависимости от нашего состояния. Здесь каждый массив путей объединяется в одну большую строку.
  • Компонент (Настройки): теперь у нас есть ранее разработанные настройки для управления цветом и размером обводки.

Заключение

Создание этого приложения оказалось проще, чем я думал, и сочетание простых решений дало отличный результат. Если вы хотите ознакомиться с кодом целиком, загляните в мой репозиторий на GitHub, и если он вам понравился или у вас есть вопросы/комментарии, не стесняйтесь оставлять комментарии. Спасибо!

Бен работает гибким инженером-программистом в TribalScale и живет в Бразилии. Он фронтенд-разработчик, и его стек сегодня — React Native и ReactJS, до TribalScale он работал разработчиком полного стека в течение 8 лет. Помимо работы у него есть несколько увлечений, последнее из которых — кожевенное ремесло, и он любит проводить время со своим годовалым сыном.

TribalScale — глобальная инновационная компания, которая помогает предприятиям адаптироваться и процветать в эпоху цифровых технологий. Мы трансформируем команды и процессы, создаем лучшие в своем классе цифровые продукты и создаем прорывные стартапы. Узнайте больше о нас на нашем сайте. Присоединяйтесь к нам в Twitter, LinkedIn и Facebook!