react-native-reanimate를 사용한 애니메이션

설명서 - 애니메이션(초보자)
기본 반응 - CLI

소개
일상생활에서 간단한 애니메이션을 사용할 수 있도록 초보자를 위한 문서입니다. 이 문서에는 github에서도 사용할 수 있는 간단한 코드가 있습니다.

설치
애니메이션 패키지를 설치하는 방법은 간단합니다.

yarn add react-native-reanimated
or
npm install react-native-reanimated

터미널에서 이 명령을 사용하십시오.

설치 직후/ios 폴더 내에서 pods install 명령을 사용하여 cocoapods를 통해 설치해야 합니다. 설치 후 babel.config.js 파일에 플러그인을 삽입해야 합니다.

module.exports = {
…
plugins: [
…
         'react-native-reanimated/plugin',
     ],  
};

가능한 오류
사용시 되살아났을 때 이전 단계가 발생했다는 오류가 발생했는데 완료해도 캐시 오류가 발생할 수 있으니 해결됨yarn start --reset-cache
Reanimated를 사용하여 메뉴를 여는 데 사용된 코드

import React from 'react';
import {StyleSheet} from 'react-native';
import Animated, {
 interpolate,
 runOnJS,
 useAnimatedStyle,
 useSharedValue,
 withSpring,
 withTiming,
} from 'react-native-reanimated';
import {
 Container,
 Content,
 Blackout,
 TopClose,
 CloseItem,
 Image,
} from './styles';

export const ModalSettings: React.FC<any> = ({setOpenModalFunction}) => {
 const offset = useSharedValue(900);

 const animatedStyles = useAnimatedStyle(() => ({
   transform: [{translateY: offset.value}],
   opacity: interpolate(offset.value, [0, -280], [1, 0.5]),
 }));

 offset.value = withSpring(20);

 const animatedAndClose = () => {
   offset.value = withTiming(
     1200,
     {
       duration: 800,
     },
     () => {
       'worklet';

       runOnJS(setOpenModalFunction)();
     },
   );
 };

 return (
   <Blackout>
     <Container>
       <Animated.View style={[animatedStyles, styles.animated]}>
         <Content>
           <TopClose onPress={animatedAndClose}>
             <CloseItem />
           </TopClose>
           <Image
             source={{
               uri: 'https://cdn.dribbble.com/users/745861/screenshots/7889509/media/5891d9d48179ca0b3a8fcdf178db8737.png',
             }}
           />
         </Content>
       </Animated.View>
     </Container>
   </Blackout>
 );
};

const styles = StyleSheet.create({
 animated: {
   flex: 1,
 },
});

전체 애플리케이션이 포함된 github 링크는 다음과 같습니다.



Open here github