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

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

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

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

const Y = new Animated.Value(0);

 

02. 변수에 값을 변경한다면 절대 절대 절대 절대 이렇게 하지 않는다. 

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

Y = 20

 

03. Animated 될 수 있는 것에만 Animated 를 시도한다. ㅋㅋ

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);

 

다음글

2023.01.31 - [개발로그/ReactNative] - React Native Animated - 애니메이션 value 를 수정하기 위해 사용하는 것들. 예제 포함

2023.02.01 - [개발로그/ReactNative] - 에러가 있는 코드로부터 배운다. React Native Animated 에서의 Value 수정하기(useRef)