Привет, это Альваро, и сегодня мы начинаем новую серию статей о React Native!
Что мы будем делать здесь?
- Красивые анимации с React Native
- Исследуйте все возможности ручной анимации (без дополнительных библиотек), Animated API.
- Стилизованные компоненты!
- Redux (возможно, это добавляет сложности, но мы можем управлять анимацией, где захотим!)
Что нам нужно?
- Рабочее пространство
- Выставка (узел, IDE и т. д.)
- Хайп, чтобы учиться
Хотите начать? Пойдем!
Сегодняшняя анимация…
Мы скроем/покажем боковое меню и изменим стиль строки состояния.
Давайте начнем:
(все команды пряжи могут быть выполнены с помощью npm)
expo init AnimatedMenu cd AnimatedMenu yarn add styled-components redux react-redux
Когда все будет готово, создайте 2 компонента: «Dashboard.js» для основных компонентов и «Menu.js» для меню. И папка для сохранения всех избыточных вещей (мне нравится иметь что-то вроде избыточности/редукторов, избыточности/действий и избыточности/индекса), но для этого простого проекта 3 файла будут внутри папки избыточности.
Каждый файл или папка, которые я создам с этого момента, будут внутри /src/ в нашем корневом каталоге! (Кроме основного App.js)
Чтобы ускорить работу, вот конфигурация для редукции:
Итак, теперь мы можем сосредоточиться на наших компонентах и анимации:
Это наш компонент приборной панели без анимации и не связанный с избыточностью:
Просто, но уже бесполезно.
Теперь создадим наше меню:
И давайте поместим их в наш App.js:
Прямо сейчас вы должны увидеть только компонент Dashboard, и ничего не произойдет, если мы нажмем кнопку.
Давайте сотворим волшебство:
Будем использовать пружины (на мой взгляд лучше тайминги, но иногда потребности разные и нужно использовать тайминги)
Функция .spring() будет управлять всем, нам просто нужно передать значение для достижения. В примере:
У нас есть поле шириной 200px:
const animatedWidth = new Animated.Value(200);
...
<AnimatedBox style={{ width: animatedWidth }} />
Если мы настроим функцию, которая изменяет эту ширину:
const changeWidth = () => {
Animated.spring(animatedWidth, { toValue: 400 }).start();
}
Когда мы запустим эту функцию, ширина увеличится с 200 до 400 и будет иметь красивую пружинящую анимацию.
Теперь, в нашей панели инструментов, что мы хотим сделать? Хм... мы хотим изменить размер (масштаб) компонента и переместить его вправо.
Что мы можем сделать? Измени масштаб и переведиX!
В нашем Dashboard.js импортируйте Animated API из react-native и создайте конструктор:
constructor(props) {
super(props);
this.scale = new Animated.Value(1);
this.translateX = new Animated.Value(0);
}
Компонент всегда будет начинаться с нормального масштаба и будет находиться в правильном положении.
Теперь мы не можем анимировать обычные компоненты, нам нужно создать анимированный компонент. Под нашим компонентом Container создайте AnimatedContainer:
const AnimatedContainer = Animated.createAnimatedComponent(Container);
И поместите все это вместе на рендер:
return (
<AnimatedContainer
style={{
transform: [{ translateX: this.translateX }, { scale: this.scale }]
}}
>
<TouchableOpacity>
<Title>Toggle Menu</Title>
</TouchableOpacity>
</AnimatedContainer>
);
Теперь наш компонент Dashboard является анимированным компонентом, давайте попробуем анимацию!
Нам надо:
- Настройте ComponentDidUpdate, чтобы проверить, переключается ли меню или нет.
- Создайте функцию для запуска анимации
- Создадим обработчик для кнопки
Можно ли это сделать, не глядя в код? Это очень легко!
Это наш полный компонент:
И давайте сделаем то же самое с меню!
Как только мы это сделаем, наше приложение должно быть анимировано следующим образом:
Вот полный код для этого примера и № 1 в этой серии!
Не забывайте, что вы можете позвонить мне, если вам что-то понадобится!
