ایجاد AnimatedPlaceholder در react native

چند روز پیش در حالی که داشتم تو گیت هاب دنبال یک پیکج می گشتم به طور اتفاقی Animated Placeholder library رو دیدم که به نظرم جالب و کاربردی اومد.تصمیم گرفت برای استفاده از این کتابخانه یک آموزش آماده کنم که شما هم اگر دوست داشتید در پروژه های react native خودتون ازش استفاده کنید

در فاصلهload کامل داده ها از سرور ، از متغیرهایی برای نشان دادن اطلاعاتی که در حال بارگزاری است، استفاده می شود تا توجه کاربران را جلب کند. بنابراین در این مقاله آموزشی با React Native Animated Placeholder آشنا می شویم و با استفاده از React Native Animated Placeholder می توانیم placeholder را برای تصاویر نیز نشان دهیم.

کتابخانه React Native Animated Placeholder براساس 4 کتابخانه مختلف ساخته شده است. بنابراین ما باید همه اون ها رو نصب کنیم.

1. react-native-reanimated
2. react-native-linear-gradient
3. react-native-redash
4. react-native-gesture-handler

کتابخانه Animated Placeholder از دو نوع انیمیشن پشتیبانی می کند

1. Shine Overlay Animation
2. Fade 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-redash

npm install react-native-redash --save

نصب کتابخانه react-native-gesture-handler

npm 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-placeholder

import AnimatedPlaceholder from 'react-native-animated-placeholder';

ایجاد یک متغیر ثابت به اسم width.از Dimensions API برای گرفتن عرض screen استفاده می کنیم

const { width } = Dimensions.get('window'); 

ایجاد یک کامپوننت به اسم App.در اینجا ما همه نوع Animated Placeholder را ایجاد می کنیم و از استایل های مختلف برای سفارشی سازی اشکال استفاده می کنیم

Supported Props:

1. itemStyle: Used to set Style for Animated item.
2. duration: Used to set animation duration.
3. primaryColor: Used to set primary color of animation.
4. secondaryColor: Used to set secondary color of animation.
5. 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
}
});