ایجاد AnimatedPlaceholder در react native

چند روز پیش در حالی که داشتم تو گیت هاب دنبال یک پیکج می گشتم به طور اتفاقی Animated Placeholder library رو دیدم که به نظرم جالب و کاربردی اومد.تصمیم گرفت برای استفاده از این کتابخانه یک آموزش آماده کنم که شما هم اگر دوست داشتید در پروژه های react native خودتون ازش استفاده کنیددر فاصلهload کامل داده ها از سرور ، از متغیرهایی برای نشان دادن اطلاعاتی که در حال بارگزاری است، استفاده می شود تا توجه کاربران را جلب کند. بنابراین در این مقاله آموزشی با React Native Animated Placeholder آشنا می شویم و با استفاده از React Native Animated Placeholder می توانیم placeholder را برای تصاویر نیز نشان دهیم.کتابخانه React Native Animated Placeholder براساس 4 کتابخانه مختلف ساخته شده است. بنابراین ما باید همه اون ها رو نصب کنیم.react-native-reanimatedreact-native-linear-gradientreact-native-redashreact-native-gesture-handlerکتابخانه Animated Placeholder از دو نوع انیمیشن پشتیبانی می کندShine Overlay AnimationFade in Animationاسکرین شات از برنامهاولین گام نصب کتابخانه React Native Animated Placeholder است برای اینکار دایرکتوری پروژه رو در Command Prompt یا Terminal باز می کنیم و دستور زیر رو اجرا می کنیمnpm install react-native-animated-placeholder --saveحالا نوبت به نصب کتابخانه react-native-reanimated است.برای اینکار دستور زیر رو اجرا می کنیمnpm install react-native-reanimated --saveگام بعدی نصب کتابخانه react-native-linear-gradient است.مشابه دو مرحله قبل برای نصب این کتابخانه دستور زیر رو اجرا می کنیمnpm install react-native-linear-gradient --saveنصب کتابخانه react-native-redashnpm install react-native-redash --saveنصب کتابخانه react-native-gesture-handlernpm install react-native-gesture-handler --saveحالا باید Gradlew خودمون رو sync کنیم.برای این منظور باید Gradlew ساخته شده قبلی را clean کنیم.دایرکتوری پروژه خودتون رو در Command Prompt یا Terminal باز کنید و دستور زیر را اجرا کنیدcd android && gradlew cleanپروژه شما حالا آماده برای کد زدن است.اما قبلش دستور cd رو اجرا کنید تا به root اصلی پروژه برگردید.یا میتونید کلا Terminal رو ببندید و خیال خودتون رو راحت کنیدفایل App.js را باز کنید و کامپوننت های StyleSheet, View, Text و Dimensions را ایمپورت کنیدimport React from 'react'; import { StyleSheet, View, Text, Dimensions } from 'react-native';ایمپورت AnimatedPlaceholder از کتابخانه react-native-animated-placeholderimport AnimatedPlaceholder from 'react-native-animated-placeholder';ایجاد یک متغیر ثابت به اسم width.از Dimensions API برای گرفتن عرض screen استفاده می کنیمconst { width } = Dimensions.get('window'); ایجاد یک کامپوننت به اسم App.در اینجا ما همه نوع Animated Placeholder را ایجاد می کنیم و از استایل های مختلف برای سفارشی سازی اشکال استفاده می کنیمSupported Props:itemStyle: Used to set Style for Animated item.duration: Used to set animation duration.primaryColor: Used to set primary color of animation.secondaryColor: Used to set secondary color of animation.animationType: ‘overlay‘ and ‘fade‘ animation type.export default function App() { return ( <View style={styles.MainContainer}> <Text style={styles.title}>Shine Overlay Animation</Text> <AnimatedPlaceholder itemStyle={styles.imagePlaceholder} /> <AnimatedPlaceholder itemStyle={styles.titlePlaceholder} /> <View style={styles.detailsContainer}> <AnimatedPlaceholder itemStyle={styles.authorImagePlaceholder} /> <AnimatedPlaceholder itemStyle={[ styles.infoPlaceholder, styles.otherStyle ]} /> <AnimatedPlaceholder itemStyle={styles.infoPlaceholder} /> </View> <Text style={styles.title}>Fade Animation</Text> <AnimatedPlaceholder itemStyle={styles.imagePlaceholder} animationType='fade' /> <AnimatedPlaceholder itemStyle={styles.titlePlaceholder} animationType='fade' /> <View style={styles.detailsContainer}> <AnimatedPlaceholder itemStyle={styles.authorImagePlaceholder} animationType='fade' /> <AnimatedPlaceholder itemStyle={[ styles.infoPlaceholder, styles.otherStyle ]} animationType='fade' /> <AnimatedPlaceholder itemStyle={styles.infoPlaceholder} animationType='fade' /> </View> </View> ) };ایجاد استایلconst styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', paddingHorizontal: width * 5 / 100 }, title: { fontWeight: 'bold', fontSize: 24, alignSelf: 'stretch', textAlign: 'left', marginVertical: width * 3 / 100 }, imagePlaceholder: { width: '100%', height: width * 40 / 100, // Height backgroundColor: '#E0E0E0', overflow: 'hidden', marginBottom: width * 3 / 100 }, titlePlaceholder: { width: '100%', height: width * 9 / 100, backgroundColor: '#E0E0E0', overflow: 'hidden' }, detailsContainer: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: width * 3 / 100 }, authorImagePlaceholder: { height: width * 9 / 100, width: width * 9 / 100, borderRadius: width * 5 / 100, overflow: 'hidden', backgroundColor: '#E0E0E0' }, infoPlaceholder: { flex: 1, height: width * 9 / 100, backgroundColor: '#E0E0E0', overflow: 'hidden' }, otherStyle: { marginHorizontal: width * 2.5 / 100 } });