React Native Reanimated 2 레이아웃 애니메이션 예제

Layout Animations은 Reanimated 2 라이브러리를 사용하여 React Native 구성 요소의 시작, 종료 및 레이아웃 변경에 애니메이션을 적용하는 가장 쉬운 방법입니다.



좋아보이죠? 그리고 구현하기가 매우 쉽습니다! 🎉

TLDR You can find the source code on reanimated-cards-layout repo.

설정

먼저 새로운 React Native 프로젝트가 필요합니다. 그런 다음 react-native-reanimated 라이브러리와 reanimated babel 플러그인을 설치해야 합니다. 그렇게 하려면 documentation을 따르십시오.

레이아웃 애니메이션

이미징에는 "자식"Card 구성 요소가 있습니다.

const Card = ({ image, title }) => (
  <View style={styles.container}>
    <Image source={image} />
    <Text>{title}</Text>
  </View>
)

그리고 카드 목록을 렌더링하는 부모 구성 요소:

<View style={styles.row}>
  {cards.map(({ image, title }) => (
     <Card
       image={image}
       title={title}
     />
  ))}
</View>

이제 카드 입력, 종료 및 레이아웃 변경을 애니메이션으로 만들려면 Card 구성 요소를 약간 변경하기만 하면 됩니다.

View에서 Animated.View 구성 요소로 전환합니다.

entering , exiting 및 layout 소품을 추가합니다.

import Animated, { FadeOutDown, FadeInUp, Layout, Easing } from 'react-native-reanimated'

const Card = ({ image, title }) => (
  <Animated.View 
    style={styles.container}
    layout={Layout.duration(200).delay(200)}
    entering={FadeInUp}
    exiting={FadeOutDown}
  >
    <Image source={image} />
    <Text>{title}</Text>
  </Animated.View>
)

그게 다야! 🥳

미리 정의된 entering , exiting 및 layout transitions 을 사용할 수 있습니다. 또는 custom animation을 생성합니다.

궁금하신 점은 댓글로 달아주시고 💖버튼 눌러주시면 해피해킹! 🙌🏻

학점

사진 제공 Pixabay .