React Native Re-Animated로 애니메이션 토스트를 만드는 방법

이 기사에서는 React Native에서 처음부터 자신만의 Animated Toast를 만들 것입니다.



React Native는 인기 있는 오픈 소스 Javascript 프레임워크로 Meta(이전에는 Facebook으로 알려짐)에서 만들고 관리합니다.

참고: 이 글은 기본 리액트 네이티브에 대한 사전 지식이 있다고 가정하며 컴퓨터에 리액트 네이티브를 설치하거나 설정하는 방법은 설명하지 않습니다.

React Native에서 애니메이션을 구현하는 방법이 한 가지만 있는 것은 아닙니다. React Native에는 자체 라이브러리Animated가 있어 매우 쉽게 만들 수 있는 멋진 유동 애니메이션을 제공합니다.

그러나 우리는 swmansion의 멋진 팀에서 만들고 관리하는 React Native Reanimated을 사용할 것입니다.

React Native Reanimated를 사용하여 수행된 애니메이션은 애니메이션 및 이벤트 처리 로직이 JavaScript 스레드와 UI 스레드에서 분리되어 훨씬 더 매끄럽고 멋집니다.

이제 실제 코드로 들어가 봅시다...

터미널에서 코드를 실행하여 새로운 React Native 프로젝트를 생성하는 것으로 시작하겠습니다.

npx react-native init AnimatedToastExample

npx react-native run android를 사용하여 시뮬레이터 또는 실제 장치에서 새 프로젝트를 자유롭게 실행하십시오.

다음으로 애니메이션용 패키지를 설치합니다.

npm i react-native-reanimated

react-native-reanimate 설정을 완료하려면 프로젝트의 루트로 이동하여 babel.config.js 파일에 다음을 추가하십시오.

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

iOS용으로 개발하는 경우 npx pod-install를 실행하는 것을 잊지 마십시오.

이제 React Native 구성요소 애니메이션을 시작할 준비가 되었습니다.

버튼 구성 요소 만들기

<TouchableOpacity
    style={{
        backgroundColor: 'teal',
        alignSelf: 'center',
        padding: 10,
        marginTop: 40,
        borderRadius: 4
    }}
    onPress={showToast}
>
    <Text style={{ color: 'white' }}>
        Show Toast
    </Text>
</TouchableOpacity>

토스트 구성 요소 만들기

<View
    style={[{
        padding: 20,
        position: 'absolute',
        top: 40,
        width: '100%',
        zIndex: 1
    }]}
>
    <View
        style={{
            backgroundColor: 'teal',
            padding: 10,
            borderRadius: 4,
        }}
    >
        <Text style={{ color: 'white' }}>
            This is a toast message
        </Text>
    </View>
</View>

이제 토스트에 애니메이션을 적용하기 전에 애니메이션 라이브러리에서 Animated를 가져오고 포장View 구성 요소를 변경하여 대신 Animated.View를 사용하겠습니다.

import Animated from 'react-native-reanimated';

다음과 같이 구성 요소의 View를 Animated.View로 변경합니다.

<Animated.View
    style={[{
        padding: 20,
        position: 'absolute',
        top: 40,
        width: '100%',
        zIndex: 1
    }]}
>
    <View
        style={{
            backgroundColor: 'teal',
            padding: 10,
            borderRadius: 4,
        }}
    >
        <Text style={{ color: 'white' }}>
            This is a toast message
        </Text>
    </View>
</Animated.View>

다음으로 애니메이션 구성 요소의 스타일 블록 내에서 애니메이션할 수 있는 스타일을 추가해야 합니다. 우리가 원하는 것은 top 값을 화면 상단의 보기에서 완전히 숨기는 값으로 변경하는 것입니다.

애니메이션 라이브러리에서 2개의 후크(useAnimatedStyle 및 useSharedValue)를 가져오겠습니다.

import { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';

useSharedValue

이 후크를 사용하면 코드의 어느 지점에서든 변경할 수 있는 값을 생성할 수 있으며 변경 사항은 다른 애니메이션 후크에 의해 나열될 수 있습니다.
유일한 인수로 초기 값을 사용합니다.

useAnimatedStyle

이 후크는 콜백을 인수로 사용하고 스타일 객체를 반환합니다.
이 후크는 스타일 객체에 반환된 값의 변경 사항을 수신하고 이러한 변경 사항을 보기 구성 요소에 적용합니다.

이 2개의 후크를 사용하여 숨김 토스트에 대한 초기top 값을 만든 다음 해당 값의 변경 사항을 수신하므로 버튼을 클릭하고 값이 변경되면 토스트가 애니메이션됩니다. 새로운 top 값으로.

토스트 용기 숨기기

const toastTopPosition = useSharedValue(-Dimensions.get('window').height)

const toastAnimatedStyle = useAnimatedStyle(() => {
    return {
        top: toastTopPosition.value
    }
})

이 새 스타일을 Animated.View 구성 요소 스타일에 추가하십시오.

<Animated.View
    style={[
        {
            padding: 20,
            position: 'absolute',
            width: '100%',
            zIndex: 1
        },
        toastAnimatedStyle
    ]}
>

앱을 다시 로드하면 토스트 컨테이너가 이제 완전히 숨겨지는 것을 볼 수 있습니다.

버튼 클릭 시 토스트 표시()

이제 버튼 클릭을 처리하고 토스트를 즉시 표시합니다. 이 시점에서 애니메이션을 완성하는 데 필요한 것은 생성한 값useSharedValue을 변경하는 것뿐입니다.

const showToast = () => {
    toastTopPosition.value = withTiming(40)
}

react-native-reanimated 에서 다른 후크를 사용했음을 알 수 있습니다.


with타이밍

이 후크는 값의 변화를 애니메이션화하는 데 도움이 됩니다.

전체 변경 사항을 보려면 앱을 새로고침하세요.

이를 마무리하기 위해 setTimeout 함수에 showToast 함수를 추가하여 토스트가 몇 초 후에 사라지도록 할 것입니다.

const showToast = () => {
    toastTopPosition.value = withTiming(40)

    setTimeout(() => {
        toastTopPosition.value = withTiming(-Dimensions.get('window').height)
    }, 2000);
}

이제 최종 코드는 다음과 같아야 합니다.

import React from 'react';
import {
    SafeAreaView,
    Text,
    TouchableOpacity,
    Dimensions,
    View,
} from 'react-native';
import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';

import {
    Header,
} from 'react-native/Libraries/NewAppScreen';

const App = () => {
    const toastTopPosition = useSharedValue(-Dimensions.get('window').height)

    const toastAnimatedStyle = useAnimatedStyle(() => {
        return {
            top: toastTopPosition.value
        }
    })

    const showToast = () => {
        toastTopPosition.value = withTiming(40)

        setTimeout(() => {
            toastTopPosition.value = withTiming(-Dimensions.get('window').height)
        }, 2000);
    }

    return (
        <SafeAreaView style={{ flex: 1 }}>
            <Header />

            <Animated.View
                style={[
                    {
                        padding: 20,
                        position: 'absolute',
                        width: '100%',
                        zIndex: 1
                    },
                    toastAnimatedStyle
                ]}
            >
                <View
                    style={{
                        backgroundColor: 'teal',
                        padding: 10,
                        borderRadius: 4,
                    }}
                >
                    <Text style={{ color: 'white' }}>
                        This is a toast message
                    </Text>
                </View>
            </Animated.View>

            <View
                style={{
                    flex: 1,
                    backgroundColor: 'white'
                }}
            >
                <TouchableOpacity
                    style={{
                        backgroundColor: 'teal',
                        alignSelf: 'center',
                        padding: 10,
                        marginTop: 40,
                        borderRadius: 4
                    }}
                    onPress={showToast}
                >
                    <Text style={{ color: 'white' }}>
                        Show Toast
                    </Text>
                </TouchableOpacity>
            </View>
        </SafeAreaView>
    );
};

export default App;

여러분의 생각을 자유롭게 알려주세요. 이 글이 어떤 식으로든 도움이 되었다면 주저하지 말고 ♡를 주고 공유하세요 👍🏽.