В приложениях React Native поддержка масштабируемой векторной графики (SVG) обеспечивается модулем с открытым исходным кодом под названием react-native-svg, который поддерживается большим сообществом разработчиков.
Использование SVG может улучшить дизайн приложения, когда дело доходит до отображения различных шаблонов. Это может повлиять на то, как внешний вид приложения может выглядеть для конечного пользователя, а также на то, насколько легко редактировать шаблон, построенный с использованием SVG. SVG в основном можно найти в Интернете, и, хотя они используются аналогично типам изображений JPEG, PNG и WebP, SVG не зависит от разрешения. Отсюда определение по Википедии:
Масштабируемая векторная графика (SVG) - это формат векторных изображений на основе расширяемого языка разметки (XML) для двумерной графики с поддержкой интерактивности и анимации.
Формат SVG состоит из форм, а не пикселей, что позволяет неограниченно масштабировать этот формат с точки зрения разрешения.
В этом посте мы узнаем, как использовать react-native-svg в приложениях React Native и Expo, а также создать несколько пользовательских заголовков, например волнистый, показанный ниже.
Требования
Убедитесь, что ваша среда разработки включает следующие обязательные пакеты:
Установка библиотеки react-native-svg
Начните с создания нового проекта, используя expo-cli. Перейдите в каталог проекта, когда интерфейс командной строки завершит создание нового проекта. Затем установите все необходимые зависимости для интеграции библиотеки react-native-svg:
Причина, по которой мы используем команду expo install при создании приложения React Native с использованием Expo SDK - вместо менеджеров пакетов, таких как npm или yarn, - заключается в том, что мы сможем установить наиболее совместимую с Expo версию каждого пакета, ограничивая количество ненужных ошибок. .
Вот и все, что нужно для установки этой библиотеки. Библиотека react-native-svg содержит общие формы и элементы, такие как Svg, Rect, Circle, Line, Polygon, Path и так далее, как компоненты, которые будут использоваться. В этом посте вы увидите Svg и Path в действии.
Создайте компонент заголовка
В следующих нескольких разделах мы попытаемся создать собственный фон заголовка с нижней границей в виде волны, как показано ниже:
Начните с создания нового компонента экрана внутри файла src/screens/ScreenOne.js, который отображает заголовок на экране. (Создайте каталог, если он не существует.)
Добавьте следующий фрагмент кода в файлScreenOne.js:
Затем перейдите к файлу App.js и измените его, чтобы отобразить функциональный компонент ScreenOne, как показано ниже.
Наконец, чтобы увидеть этот простой текст заголовка на экране устройства, из окна терминала выполните команду expo start. У вас должны получиться результаты, похожие на скриншот ниже:
Создание настраиваемого компонента заголовка с волнами
В этом разделе мы добавим настраиваемый заголовок, используя компонент SVG в фоновом режиме в файле ScreenOne.js.
Компонент SVG, который мы собираемся создать, обернет примитив рисования контура. Этот примитив представляет собой контур фигуры, которую можно заливать или обводить. Этот примитив представлен компонентом Path из react-native-svg и использует различные команды, такие как elliptical Arc, moveto, lineto и т. Д. Подробнее о путях можно прочитать здесь.
Чтобы сгенерировать фон SVG, как мы видели в предыдущем разделе, я собираюсь использовать getwaves.io. Этот веб-инструмент позволяет создавать собственные волновые шаблоны в формате SVG. Посетите их веб-сайт - он прост и прекрасно выполняет свое предназначение. Вы также можете создавать различные узоры с помощью этого инструмента.
Обязательно скопируйте значения таких свойств, как viewbox и d, как показано выше.
Затем создайте файл с именем WavyHeader.js внутри каталога src/components/. Импортируйте следующие операторы:
Создайте функциональный компонент с именем WavyHeader, который будет иметь опору, переданную от родителя (компонент экрана). Назовем эту опору customStyles. Основная причина передать это свойство здесь - определить размеры компонента экрана в его собственном файле и сохранить динамическое значение стиля для разных экранов.
Вот полный фрагмент кода для этого пользовательского компонента. Обратите внимание, что свойства компонента Path такие же, как и у компонента getwaves.io.
Теперь вернитесь к файлу ScreenOne.js и импортируйте этот пользовательский компонент после остальных операторов импорта:
Добавьте этот компонент перед <View>, который представляет headerContainer:
Наконец, определите ссылку на стиль svgCurve в объекте StyleSheet, как показано во фрагменте ниже:
Из фрагмента обратите внимание, что с помощью Dimensions API из react-native мы получаем ширину текущего окна. Для свойства position установлено значение absolute, поэтому компонент заголовка, содержащий заголовок, отображается и не скрывается за этим волнистым фоном.
Окончательный результат должен выглядеть так:
Сделайте компонент WavyHeader многоразовым
Пока что мы выполнили задачу по отображению волнистого фона заголовка на компоненте экрана. Но что, если сценарий изменится, и у вас будет два экрана, для каждого из которых требуется волнистый фон заголовка, но с некоторыми настройками, такими как разная высота или волновые узоры?
В этом разделе давайте настроим компонент WavyHeader, чтобы он принимал больше свойств, чтобы мы могли использовать его повторно.
Во-первых, давайте настроим файл WavyHeader.js, чтобы он принимал больше реквизитов:
Теперь компонент<Path /> будет принимать значения (например, backgroundColor, height) в форме свойств, передаваемых компоненту WavyHeader.
Затем перейдите в файл ScreenOne.js и передайте значения свойств для компонента WavyHeader:
Вы не увидите разницы в результате на экране устройства, если не измените значения этих свойств.
Заключение
Вы можете попробовать добавить больше настраиваемых экранов с разными волновыми шаблонами или попробовать повторно использовать компонент WavyHeader для разных экранов. Вот пример ниже, на котором показаны два разных экрана с разными волновыми узорами, а также с разными цветами фона и высотой.
Вы можете найти полный код этого сообщения на этом репозитории GitHub. Или попробуйте использовать клиент Expo здесь.
Или посмотрите пример Whicecream Леандро Фавра, основанный на этом руководстве!
Вот список ресурсов, использованных для создания этого поста:
💙 Чтобы узнать больше о React Native, ознакомьтесь с этими ресурсами:
Примечание редактора. Heartbeat - это онлайн-издание и сообщество, созданное авторами и посвященное предоставлению первоклассных образовательных ресурсов для специалистов по науке о данных, машинному обучению и глубокому обучению. Мы стремимся поддерживать и вдохновлять разработчиков и инженеров из всех слоев общества.
Являясь независимой редакцией, Heartbeat спонсируется и публикуется Comet, платформой MLOps, которая позволяет специалистам по данным и группам машинного обучения отслеживать, сравнивать, объяснять и оптимизировать свои эксперименты. Мы платим участникам и не продаем рекламу.
Если вы хотите внести свой вклад, отправляйтесь на наш призыв к участникам. Вы также можете подписаться на наши еженедельные информационные бюллетени (Deep Learning Weekly и Comet Newsletter), присоединиться к нам в » «Slack и подписаться на Comet в Twitter и LinkedIn для получения ресурсов, событий и гораздо больше, что поможет вам быстрее создавать лучшие модели машинного обучения.
