react native Animated 를 사용할때 알아야할 절대 Rules!

그리너리디밸로퍼 2023. 1. 31. 15:42

01. 변수가 필요하다면, Animated에서 생성해서 사용한다.

state로 변수를 생성하면 모든 컴포넌트가 re-rendering(다시 그리기) 돼버린다. 그러므로 Animated에서 무조건 생성한다.

#초기값이 0인 변수 Y를 생성한다. 

const Y = new Animated.Value(0);

# 변수값을 직접 변경하지 않는다.

Y = 20

createAnimatedComponent()를 사용해서 Animatable component로 변경한 뒤에 사용한다.

# 이렇게 하지 않는다. 

<Animated.View .. #View 자체를 Animated 하지 않는다.


createAnimatedComponent() can be used to make a component animatable.

즉,

아래 내용처럼 주어진 것을 그대로 사용하거나 createAnimatedComponent() 를 사용해서 새로 생성한 뒤에 사용한다.

Animated.Image
Animated.ScrollView
Animated.Text
Animated.View
Animated.FlatList
Animated.SectionList

생성 예)

import styled from "styled-components/native";

const Box = styled.TouchableOpacity``;

const AnimatedBox = Animated.createAnimatedComponent(Box);

728x90