Автор: Бен Гур Мартинс Карвалью, инженер по гибкому программному обеспечению, 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!