Layout Animation در react native


سلام دوستان.در این آموزش متنی قصد داریم یاد بگیریم چجوری از Layout Animation در React Native استفاده کنیم.Layout Animation یک بخش خیلی مهم از اپلیکیشن های React Native است.Layout Animation برای انیمیشن سازی یک View وقتی که از یک حالت (position) به حالت دیگر میرود،استفاده میشود.این فرآیند انیمیشن بسیار smooth است و اپلیکیشن رو بسیاز جذاب میکنه.
ما دو تا باکس با رنگ های مختلف در View اصلی ایجاد میکنیم و مقدار Flex Direction رو با استفاده از state مشخص میکنیم.با استفاده از TouchableOpacity مقدار state رو تغییر میدیم.با Layout Animation موقعیت این دو باکس بر روی صفحه نمایش تغییر میکند.
1.ایمپورت کردن کامپوننت های View, StyleSheet, Text, TouchableOpacity, LayoutAnimation, Platform و UIManager در پروژه.
1 2 3 4 5 6 7 8 9 10 11 |
import React, { Component } from 'react'; import { View, StyleSheet, Text, TouchableOpacity, LayoutAnimation, Platform, UIManager } from 'react-native'; |
2.ایجاد()constructor درون کلاس اصلی.یک state به نام flex_Direction_Value برای نگه داشتن مقدار flex direction تعریف میکنیم.rowمقدار پیشفرض این state است.حالا ما UIManager.setLayoutAnimationEnabledExperimental(true) رو درون سازنده اجرا میکنیم.این کد layout animation رو در Android فعال میکنه.بصورت پیشفرض Android از layout animation پشتیبانی نمیکنه.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
constructor() { super(); this.state = { flex_Direction_Value: 'row' } if (Platform.OS === 'android') { UIManager.setLayoutAnimationEnabledExperimental(true) } } |
3.ایجاد یک تابع به نام ()Toggle_Change_Layout. این تابع فقط مقدار state رو به Row و Column تغییرمیده. تابع LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut) بسیار اهمیت داره.این تابع انیمیشن رو در زمان تغییر لایه فعال میکنه.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
Toggle_Change_Layout = () => { LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); if( this.state.flex_Direction_Value == 'row' ) { this.setState({ flex_Direction_Value: 'column' }); } else { this.setState({ flex_Direction_Value: 'row' }); } } |
4.اضافه کردن View درون بلاک render’s return.هر دو استایل رو ما با استفاده از آرایه فراخوانی میکنیم.flexDirection با استفاده از state مقدار دهی میشود.
1 2 3 4 5 6 7 8 9 10 11 12 |
render() { return( <View style = {[ styles.MainContainer, { flexDirection: this.state.flex_Direction_Value }]}> </View> ); } |
5.اضافه کردن دو باکس رنگی درون View اصلی و اضافه کردن TouchableOpacity پایین صفحه.تابع ()Toggle_Change_Layout رو در رویداد onPress دکمه فراخوانی میکنیم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
render() { return( <View style = {[ styles.MainContainer, { flexDirection: this.state.flex_Direction_Value }]}> <View style = { styles.Block1 }> <Text style = { styles.TextStyle }>Box 1</Text> </View> <View style = { styles.Block2 }> <Text style = { styles.TextStyle }>Box 2</Text> </View> <TouchableOpacity style = {[ styles.TouchableOpacityStyle, { bottom: }]} onPress = { this.Toggle_Change_Layout } activeOpacity = { 0.5 } > <Text style = { styles.TextStyle }>Toggle Between Flex Direction Layout</Text> </TouchableOpacity> </View> ); } |
6.ایجاد استایل سفارشی
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
const styles = StyleSheet.create( { MainContainer: { flex: 1, alignItems: 'center', justifyContent: 'center', marginTop: (Platform.OS === 'ios') ? 20 : }, Block1: { width: 140, height: 140, backgroundColor: '#00BCD4', alignItems: 'center', justifyContent: 'center' }, Block2: { width: 140, height: 140, backgroundColor: '#4CAF50', alignItems: 'center', justifyContent: 'center' }, TextStyle: { color: 'white', fontSize: 18, textAlign: 'center' }, TouchableOpacityStyle: { position: 'absolute', left: , right: , backgroundColor: '#607D8B', padding: 10, marginBottom:1 } }); |
7.کد کامل برنامه در فایل App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
import React, { Component } from 'react'; import { View, StyleSheet, Text, TouchableOpacity, LayoutAnimation, Platform, UIManager } from 'react-native'; export default class App extends Component<{}> { constructor() { super(); this.state = { flex_Direction_Value: 'row' } if (Platform.OS === 'android') { UIManager.setLayoutAnimationEnabledExperimental(true) } } Toggle_Change_Layout = () => { LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); if( this.state.flex_Direction_Value == 'row' ) { this.setState({ flex_Direction_Value: 'column' }); } else { this.setState({ flex_Direction_Value: 'row' }); } } render() { return( <View style = {[ styles.MainContainer, { flexDirection: this.state.flex_Direction_Value }]}> <View style = { styles.Block1 }> <Text style = { styles.TextStyle }>Box 1</Text> </View> <View style = { styles.Block2 }> <Text style = { styles.TextStyle }>Box 2</Text> </View> <TouchableOpacity style = {[ styles.TouchableOpacityStyle, { bottom: }]} onPress = { this.Toggle_Change_Layout } activeOpacity = { 0.5 } > <Text style = { styles.TextStyle }>Toggle Between Flex Direction Layout</Text> </TouchableOpacity> </View> ); } } const styles = StyleSheet.create( { MainContainer: { flex: 1, alignItems: 'center', justifyContent: 'center', marginTop: (Platform.OS === 'ios') ? 20 : }, Block1: { width: 140, height: 140, backgroundColor: '#00BCD4', alignItems: 'center', justifyContent: 'center' }, Block2: { width: 140, height: 140, backgroundColor: '#4CAF50', alignItems: 'center', justifyContent: 'center' }, TextStyle: { color: 'white', fontSize: 18, textAlign: 'center' }, TouchableOpacityStyle: { position: 'absolute', left: , right: , backgroundColor: '#607D8B', padding: 10, marginBottom:1 } }); |
اسکرین شات:
دیدگاهتان را بنویسید