Пошаговые инструкции по клонированию пользовательского интерфейса приложения Google Fit с помощью React Native
В моем предыдущем сообщении я создал компонент пользовательского интерфейса Google Play Movies & TV, используя React Native и Expo. В этом посте я буду создавать домашний экран приложения Google для фитнеса Google Fit, которое имеет приятный и плавный интерфейс с тонкой анимацией.
Мне нравится круговая анимация, одна для точек перемещения, а другая для точек сердца, которые анимируются после запуска приложения. Я хотел попробовать это и посмотреть, смогу ли я создать компонент в react-native.
См. Фактический компонент, работающий в Expo Snack, по адресу https://snack.expo.io/@chandankkrr/google-fit-app-clone
Процесс
Начнем с создания нижнего навигатора вкладок и необходимых экранов.
Нижний навигатор вкладок
Идеально! Я собираюсь создать пользовательский интерфейс только для главного экрана, поэтому давайте посмотрим, какие компоненты присутствуют на главном экране.
Компонент FitExercise и FitHealth
Начнем с создания центрального компонента статистики. Мы можем разбить это на два отдельных компонента. Верхний FitHealthStat и нижний FitExerciseStat.
Мы заключим эти компоненты в GoogleFit компонент, который будет отображаться на вкладке Home.
Компоненты расположены на значительном расстоянии друг от друга. На данный момент это нормально, мы исправим интервал позже, когда добавим все компоненты. Теперь давайте создадим компонент линейчатой диаграммы.
Компонент FitChart
Для этого мы будем использовать пакет npm под названием react-native-chart-kit.. Он предоставляет различные типы диаграмм, которые мы можем использовать, но нам понадобится только компонент BarChart, поэтому давайте создадим компонент и добавим его в наш компонент GoogleFit. Я добавлю две диаграммы, одну для Sleep, а другую для Steps данных.
Выглядит неплохо, но мне пришлось внести несколько изменений в библиотеку диаграмм, чтобы диаграмма выглядела так, как та, что присутствует в приложении google fit. По умолчанию диаграмма отображает вертикальные метки в левой части экрана. Не было возможности отобразить метки справа. Также не было концепции добавления базовой линии для диаграммы. Я изменил код пакета диаграмм, чтобы получить желаемый результат.
Компонент AdditionalStats
Отлично, давайте перейдем к добавлению того, что я называю дополнительной статистикой, которая присутствует в нижней части экрана.
Компонент FitImage
Теперь, наконец, к анимированному компоненту пользовательского интерфейса, который заставил меня в первую очередь попытаться создать компонент, отвечающий за реакцию. Мне потребовалось некоторое время, чтобы повозиться и добраться до окончательного пользовательского интерфейса.
Давайте создадим компонент FitImage.
Я использую пакет react-native-svg npm для создания анимированных кругов. Я использую по два круга SVG для внутреннего и внешнего круга, чтобы получить эффект анимации. Первый статический Circle с strokeDashArray и второй AniamtedCircle, значение strokeDashOffset которого анимируется в течение периода 2000ms, чтобы получить эффект анимации. Оба круга SVG имеют одинаковые значения cx, cy и radius. Для уловок я добавил эффект spring к центральному изображению, используя стили масштабирования трансформации. Давайте добавим компонент FitImage в GoogleFit.
Вы можете узнать больше о круге SVG на moz: // a
Https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle
И вот он, пользовательский интерфейс приложения Google Fit с анимацией, выполненной в react native. Результатом и анимацией очень доволен. 🎉🎉🎉
Хотите попробовать сами?
Создать или клонировать репозиторий googlefit, доступный в моей учетной записи GitHub. 🙏🙏🙏
