Анимированный индикатор прогресса в React Native с использованием Animated API и onLayout

🔥 В этом видеоуроке вы узнаете, как создать повторно используемый компонент анимированного индикатора прогресса в React Native, используя React Native Animated API и React Native onLayout.

Мы рассмотрим:
Как создать повторно используемый компонент в React Native
Как анимировать индикатор прогресса
Как рассчитать положение индикатора на основе текущего прогресса.
Как использовать onLayout для получения размера индикатора прогресса
Как использовать реактивную анимацию в React Native с помощью Animated API

----
⚠️ Полный исходный код: https://www.animatereactnative.com/po...
----

Стартовый код: https://gist.github.com/catalinmiron/...

👉👉 Есть вопросы? Присоединяйтесь к Discord:   / discord  .

Хотите меня поддержать?

Patreon:   / catalinmiron  
BuyMeACoffee: https://www.buymeacoffee.com/catalinm...
PayPal: https://paypal.me/catalinmiron
----

Вы можете найти меня на:

Github: http://github.com/catalinmiron
Twitter:   / mironcatalin  
Сайт: http://batman.codes

---

Хронология:
00:00 Введение
00:40 Шаблон + ссылка на стартовый код
01:05 Что мы собираемся создать
02:00 Начало разработки многоразового компонента индикатора прогресса
03:50 Добавление метки индикатора прогресса
05:00 Создание реактивного типа для анимации с помощью React Native Animated API
05:25 Почему new Animated.Value() находится внутри React.useRef
06:05 Использование React Native onLayout для измерения макета
06:40 Определение анимации для индикатора прогресса
07:15 Изменение анимации при получении Progress нового свойства
08:10 Математическая формула для расчета координаты x индикатора прогресса
09:06 Применение анимации к Progress
09:25 [ПРЕДВАРИТЕЛЬНЫЙ ПРОСМОТР] Вывод индикатора прогресса React Native
09:50 Фиктивный интервал для обновления индикатора прогресса с помощью React.useEffect
11:04 Заключение и благодарности

#react-native-animated-api #react-native-progress-bar #react-native-progress-indicator #react-native-indicator #react-native-animated-indicator #react-native-onlayout #react-native-reactive-animation #react-native-reusable-component #react-native-анимация