Вступление
В этой статье демонстрируется создание простой и легкой реализации Спидометра в React Native с минимальными зависимостями.
- Базовые требования
- Обзор свойств по умолчанию
- Утилиты
- Интеграция в компонент
- использование
- Ссылки
Единственная необходимая внешняя зависимость - это пакет prop-types для проверки типа или проверки правильности.
Кроме этого, нам понадобится одно пользовательское изображение стрелки спидометра.
Базовые требования
Единственная необходимая внешняя зависимость - это пакет prop-types для проверки типа или проверки правильности.
Кроме этого, нам понадобится одно пользовательское изображение стрелки спидометра.
Обзор свойств по умолчанию
значение: текущее значение.
defaultValue: начальное значение.
minValue: минимальный предел.
maxValue: максимальный предел.
easyDuration: уменьшение продолжительности анимации стрелки.
метки: список меток с цветом.
NeedleImage: абсолютный путь к изображению иглы.
Утилиты
Требуются три типа служебных функций.
- Рассчитать степень по этикеткам
- Вычислить метки из значения
- Предельное значение
Рассчитать степень по этикеткам
Эта функция Simple Utility вернет градус метки из списка меток.
Общий градус круга делится на длину метки, чтобы получить градус уровня.
Вычислить метки из значения
Эта служебная функция возвращает текущую метку из списка меток на основе текущего значения спидометра.
Во-первых, значение спидометра нормализуется в процентах на основе maxValue и minValue.
Затем текущий индекс метки вычисляется путем умножения его на длину списка меток. (Индекс всегда на 1 меньше фактического).
Наконец, мы можем вернуть метку из списка на основе рассчитанного индекса.
Предельное значение
Эта служебная функция используется для ограничения текущего значения между maxValue и minValue.
Интеграция в компонент
Добавление стилей
wrapper: стили оболочки.
outerCircle: стили внешнего круга.
innerCircle: стили внутреннего круга.
halfCircle: используется для создания блоков надписей между внешним и внутренним кругом.
imageWrapper: стили обертки изображения иглы спидометра.
изображение: стили изображения иглы спидометра.
label: стили ярлыков.
labelNote: стили заметок для ярлыков.
Построение статического компонента на основе стилей
Добавив это, ваш компонентный спидометр будет выглядеть следующим образом
Причина добавления объектов стиля в массив заключается в том, что позже мы добавим в него больше стилей.
Добавление утилит
Начальный градус установлен на 180 для полукруга.
Теперь мы получаем perLevelDegree и label на основе value, поставленных в качестве реквизита.
circleDegree рассчитывается для каждого стиля halfCircle на основе текущего индекса метки и perLevelDegree. 90 добавлен к нему, потому что наш круг начинается как полукруг.
Цвет фона нашего полукруга устанавливается на основе метки, которую мы получаем от нашего утилиты.
Затем мы используем преобразования для позиционирования и поворота нашего блока на основе circleDegree.
При добавлении вышеуказанных изменений спидометр будет выглядеть примерно так
Добавление анимации
Сначала нам нужно инициализировать значение спидометра в конструкторе. Затем мы добавляем анимацию на основе текущего значения, ограниченного нашей служебной функцией.
Диапазон вывода устанавливается от -90deg до 90deg для анимации иглы.
Теперь этот компонент готов к экспорту и использованию.
использование
После внесения необходимых изменений и обновления значения на основе TextInput компонент будет выглядеть следующим образом.
Ссылки
Полный код можно найти на Github или npm в виде пакета react-native-speedometer.
Спасибо за прочтение. Если вам понравилась эта статья, покажите свою поддержку, хлопнув, чтобы поделиться с другими людьми на Medium.
Больше интересных вещей можно найти в моих профилях StackOverflow и GitHub.
Следуйте за мной в LinkedIn, Medium, Twitter для дальнейшего обновления новых статей.
Первоначально опубликовано на сайте pritishvaidya.com 13 января 2019 г.
