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 در پروژه.

import React, { Component } from 'react';
 
import { 
    View, 
    StyleSheet, 
    Text, 
    TouchableOpacity, 
    LayoutAnimation, 
    Platform, 
    UIManager 
} from 'react-native';

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 پشتیبانی نمیکنه.

constructor()
    {
        super();
 
        this.state = { 
 
          flex_Direction_Value: 'row' 
 
        }
 
        if (Platform.OS === 'android')
        {
          UIManager.setLayoutAnimationEnabledExperimental(true)
        }
    }

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) بسیار اهمیت داره.این تابع انیمیشن رو در زمان تغییر لایه فعال میکنه.

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' });
        }
    }

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 مقدار دهی میشود.

render()
    {
        return(
            <View style = {[ styles.MainContainer, { flexDirection: this.state.flex_Direction_Value }]}>
 
 
                
 
 
            </View>
        );
    }

render()

{

return(

</View>

);

}

5.اضافه کردن دو باکس رنگی درون View اصلی و اضافه کردن TouchableOpacity پایین صفحه.تابع ()Toggle_Change_Layout رو در رویداد onPress دکمه فراخوانی میکنیم.

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: 0 }]}
                onPress = { this.Toggle_Change_Layout } 
                activeOpacity = { 0.5 } >
 
                    <Text style = { styles.TextStyle }>Toggle Between Flex Direction Layout</Text>
 
                </TouchableOpacity>
 
 
            </View>
        );
    }

render()

{

return(

</View>

</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.ایجاد استایل سفارشی

const styles = StyleSheet.create(
  {
    MainContainer:
      {
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center',
          marginTop: (Platform.OS === 'ios') ? 20 : 0
      },
   
      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: 0,
          right: 0,
          backgroundColor: '#607D8B',
          padding: 10,
          marginBottom:1
      }
  
  });

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

import React, { Component } from 'react';
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://reactapp.ir/drawer-navigator-with-custom-sidebar-menu-in-react-native/" target="_blank" class="IRPP_ruby"><!-- INLINE RELATED POSTS 1/1 //--><style> .IRPP_ruby , .IRPP_ruby .postImageUrl , .IRPP_ruby .centered-text-area { height: 130px; position: relative; } .IRPP_ruby , .IRPP_ruby:hover , .IRPP_ruby:visited , .IRPP_ruby:active { border:0!important; } .IRPP_ruby .clearfix:after { content: ""; display: table; clear: both; } .IRPP_ruby { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #2C3E50; } .IRPP_ruby:active , .IRPP_ruby:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #34495E; } .IRPP_ruby .postImageUrl { background-position: center; background-size: cover; float: right; margin: 0; padding: 0; width: 31.59%; } .IRPP_ruby .centered-text-area { float: left; width: 65.65%; padding:0; margin:0; } .IRPP_ruby .centered-text { display: table; height: 130px; right: 0; top: 0; padding:0; margin:0;float: left;width: 100%; } .IRPP_ruby .IRPP_ruby-content { display: table-cell; margin: 0; padding: 0 0px 0 74px; position: relative; vertical-align: middle; width: 100%; } .IRPP_ruby .ctaText { border-bottom: 0 solid #fff; color: #3498DB; font-size: 13px; font-weight: bold; margin: 0; padding: 0; } .IRPP_ruby .postTitle { color: #ECF0F1; font-size: 16px; font-weight: 600; margin: 0; padding: 0; } .IRPP_ruby .ctaButton { background: url(https://reactapp.ir/wp-content/plugins/intelly-related-posts-pro/assets/images/next-arrow.png)no-repeat; display: inline-block; height: 130px; width: 54px; } .IRPP_ruby .ctaButton { background-color: inherit; margin-left: 10px; position: absolute; left: 0; top: 0; } .IRPP_ruby:after { content: ""; display: block; clear: both; } </style><div data-bg="https://reactapp.ir/wp-content/uploads/drawer-navigator-with-custom-sidebar-menu-in-react-native-300x162.jpg" class="postImageUrl rocket-lazyload" style=""></div><div class="centered-text-area"><div class="centered-text"><div class="IRPP_ruby-content"><div class="ctaText"></div><div style="clear:both"></div><div class="postTitle">ایجاد Drawer Navigator در React Native</div></div></div><div class="ctaButton"></div></div></a></div> 
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: 0 }]}
                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 : 0
      },
   
      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: 0,
          right: 0,
          backgroundColor: '#607D8B',
          padding: 10,
          marginBottom:1
      }
  
  });

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>

</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

}

});

اسکرین شات:

Layout Animation در react native

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

مطالب زیر را حتما مطالعه کنید

چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟

آموزش آرایه در جاوا اسکریپت ( JavaScript)

استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)

نمایش PDF در react native

ایجاد Timeline ListView در React Native

آموزش React Navigation 5

دیدگاهتان را بنویسید لغو پاسخ