이전글
2023.01.31 - [개발로그/ReactNative] - react native Animated 를 사용할때 알아야할 절대 Rules!
2023.01.31 - [개발로그/ReactNative] - React Native Animated - 애니메이션 value 를 수정하기 위해 사용하는 것들. 예제 포함
2023.02.01 - [개발로그/ReactNative] - 에러가 있는 코드로부터 배운다. React Native Animated 에서의 Value 수정하기(useRef)
Interpolation (공부중)
inputRange의 데이터를 주면 ouputRange 데이터값들로 변환하여 반환해준다.
const opacity = Y_POSITION.interpolate({
inputRange: [-300, 0, 300],
outputRange: [1, 0 , 1],
});
Y_POSITION.addListener(()=> console.log(opacity))
콘솔에 찍히는 로그는 -300 일때 1, 0 일때 0 , 300일때 1이 된다.
반환되는 값은 컴포넌트에서 아래와 같이 사용될 수 있다.
<AnimatedBox
style={{
opacity: opacityValue,
transform: [{ translateY: Y_POSITION }],
}}
/>
또는 이렇게도 표현할 수 있다.
<AnimatedBox
style={{
opacity,
transform: [{ translateY: Y_POSITION }],
}}
/>
and ALSO 색깔이나 문자열도 interpolsate 될 수 있다.
728x90
'개발로그 > ReactNative' 카테고리의 다른 글
다이어리 앱을 만들면서 연습해보자. - [D] realm.delete() / [U] (0) | 2023.02.19 |
---|---|
다이어리 앱을 만들면서 연습해보자.- LayoutAnimation 종류 / 사용방법 (0) | 2023.02.18 |
다이어리 앱을 만들면서 연습해보자.- [R] Realm.filtered() 로 조회하고 Home.js 화면 그리기 / write.js에서 저장된 데이터를 Listenning해서 반영하기 (0) | 2023.02.18 |
다이어리 앱을 만들면서 연습해보자. - context / realm.write() / 창 닫기 (0) | 2023.02.18 |
다이어리 앱을 만들면서 연습해보자. - Write 화면 구현하기 (0) | 2023.02.17 |
react-native 에서 아이콘 표시하는 두가지 방법 (0) | 2023.02.16 |
<View> 의 onLayout 을 사용하면서 <NavigationContainer>와도 공존하기 (0) | 2023.02.16 |
다이어리 앱을 만들면서 연습해보자. - mongoDB 연동(Realm open/스키마 정의 하기) (0) | 2023.02.14 |
댓글