Как анимировать клики в приложениях React Native

Итак, каждый день мы создаем новые приложения и делаем множество анимаций, таких как переходы между страницами или маршруты наших приложений. Итак, в дополнение к библиотеке между страницами сделайте анимацию с переходами (если хотите знать как, нажмите здесь).

Теперь в новой версии 1.0.8 мы можем анимировать нажатия на кнопки как компонент. Давай сделаем это!

Как подать заявку

В библиотеке, которую мы собираемся использовать, а именно Между страницами, у нас есть компонент, который мы можем импортировать под названием Wrapper, с помощью которого мы можем анимировать любые кнопки при нажатии. На данный момент у нас есть только два типа анимации: SPRING и FADE, скоро будет выпущено больше.

Чтобы начать анимацию нажатия кнопок с помощью Между типами, необходимо импортировать оболочку и добавить ее вокруг компонента в виде кнопки. Таким образом:

...

import { Wrapper, BetweenTypes } from "between-pages";

const WrapperExamples: React.FC = () => {
  return (
    <View style={styles.container}>
      <Wrapper
        delay={100}
        onPress={() => {}}
        type={BetweenTypes.SPRING}
        >
        <Button title="Click me" backgroundColor="#D4C1EC" />
      </Wrapper>
      <Wrapper
        delay={300}
        onPress={() => {}}
        type={BetweenTypes.FADE}
        >
        <Button title="Click me" backgroundColor="#FEFFBE" />
      </Wrapper>
    </View>
  );
};

const Button = ({
  title,
  backgroundColor = "#FFFFFF",
}: {
  title: string;
  backgroundColor?: string;
}) => {
  return (
    <View
      style={[
        styles.button,
        {
          backgroundColor,
        },
      ]}
    >
      <Text style={styles.title}>{title}</Text>
    </View>
  );
};

...

Посмотрите, как наша кнопка будет выглядеть в приложении:

Помня, что в репозитории гораздо больше деталей и больше конфигураций.

Ты получил это! 👍😁

Большое спасибо, надеюсь, я помог великому сообществу React. ❤🙌

Репозиторий

Гитхаб

Tapedin: @hubertryan

Твиттер

Инстаграм

Большое спасибо, надеюсь, я помог великому сообществу React. ❤🙌