ورود Component با Animation در React Native

شاید برای شما هم پیش آمده که بخواهید Component ها در هنگام ورود به صفحه با Animation همراه شوند و شاید هم این کار را کرده اید به علت پیچیده‌گی ها که به پروژه اضافه میشود شاید در خیلی از قسمت ها از این کار منصرف و یا شاید حوصله انجام دادن این کار را در ادامه پروژه نداشته اید در این مقاله من ماژولی معرفی میکنم که به این کار کمک میکند که راحتتر انجام دهید و Performance مناسبی هم دارد. در تصویر زیر شما Mount شدن Component ها را بدون react-native-arrival میبینید:

و اما در تصویر زیر همین Componentها را با react-native-arrival مجهز کردیم:

چه چیزی راحتتر شده است؟

توسط ماژول react-native-arrival میتوانید هر Animationی به Componentها در هنگام Mount شدن اعمال کنید. به صورت پیش فرض Componentها در هنگام ورود هیچ Animation ندارند و به صورت لحظه ای در صفحه نمایش داده میشوند یکی از بهتری راههای اضافه کردن Animation به Component ها در لحظه ای ورود یا اصطلاحا لحظه ای Mount شدن هست که در این روش مشکلی Performance در خصوص انباشته شدن Component ها در صفحه برای Animation نخواهید داشت.


نحوه استفاده

فرض کنید ما همچین Componentی داریم که قرار است با اتفاق افتادن یک رویدادی مانند Press از قسمت خاصی از صفحه و از کوچکترین حالت خود وارد صفحه شود در ابتدا Component ما همچین شکلی هست.

import React, { Component } from 'react';
import { Text, View } from 'react-native';

class ScreenA extends Component {  
    render() {
        return (
            <View style={{ flex: 1 }}>
                <Text>Screen A</Text>
            </View>
        );
    }
}

export default ScreenA

برای پیاده سازی Animation در نظر گرفته برای این Component کد بالا را به کد زیر تغییر میدهیم:

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import Arrival from 'react-native-arrival';

class ScreenA extends Component {
    render() {
        return (
            <View style={{ flex: 1 }}>            
               <Text>Screen A</Text>
           </View>
            );
       }
}
export default Arrival(ScreenA, {
    translateX: { from: 500, to: 0 },
    scale: { from: 0, to: 1 }
});

به همین راحتی :)

برای بررسی حالت های Advance‌تر میتوانید به لینک های زیر مراجعه کنید:

https://github.com/uxitten/react-native-arrival

https://www.npmjs.com/package/react-native-arrival