بخش های اصلی

آموزش React Native

React Native – انیمیشن ها

در این بخش نحوه ی استفاده از LayoutAnimation را در React Native آموزش میدیم.

کامپوننتِ Container

myStyle را بعنوان پراپرتیِ state (وضعیت) تعریف می کنیم. این پراپرتی برای استایل دادن به عناصر داخلِ MyPresentationalComponent استفاده میشه. اکنون این پراپرتی را بعنوان یک prop، پاس میدیم.

دو تابع را نیز ایجاد می کنیم: expandElement و collapseElement. این دو تابع، مقادیرِ state (وضعیت) را به روز رسانی می کنن. اولین تابع، از انیمیشنِ spring استفاده می کنه، و دومین تابع بصورت پیش فرض از linear استفاده می کنه. این دو تابع را هم بعنوانِ prop پاس میدیم.

مثال

import React, { Component } from 'react'
import {
   View,
   LayoutAnimation
} from 'react-native'
import MyPresentationalComponent from './MyPresentationalComponent'

export default class MyContainerComponent extends Component {
   constructor() {
      super()
      this.state = {
         myStyle: {
            height: 100,
            backgroundColor: 'red'
         }
      }
   }
   expandElement = () => {
      LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
      this.setState({
         myStyle: {
            height: 400,
            backgroundColor: 'red'
         }
      })
   }
   collapseElement = () => {
      LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
      this.setState({
         myStyle: {
            height: 100,
            backgroundColor: 'red'
         }
      })
   }
   render() {
      return (
         <View>
            <MyPresentationalComponent
               myStyle = {this.state.myStyle}
               expandElement = {this.expandElement}
               collapseElement = {this.collapseElement}
            />
         </View>
      )
   }
}

کامپوننت نمایشی

برای استایل دادن به عنصرِ View از propای با نامِ myStyle استفاده می کنیم. به یاد داشته باشین که این prop را از state (وضعیت) در myContainerComponent میگیریم.

دکمه هایِ Expand و Collaps، تابع هایی که از قبل تعریف کردیم را فراخوانی می کنن.

مثال

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

export default MyPresentationalComponent = (props) => {
   return (
      <View>
         <View
            style = {props.myStyle}>
         </View>

         <TouchableOpacity>
            <Text
               style = {styles.button}
               onPress = {props.expandElement}>
               Expand
            </Text>
         </TouchableOpacity>

         <TouchableOpacity>
            <Text
               style = {styles.button}
               onPress = {props.collapseElement}>
               Collapse
            </Text>
         </TouchableOpacity>
      </View>
   )
}

const styles = StyleSheet.create ({
   button: {
      flex: 1,
      borderWidth: 1,
      borderColor: 'red',
      color: 'red',
      textAlign: 'center',
      marginTop: 50,
      padding: 10
   }
})

برای باز و بسته کردن (expand and collaps) عنصر، روی دکمه ها کلیک کنین.

 

مبحث آموزشی

آموزش React Native

Learn React Native

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

تبلیغات

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

آخرین مقالات

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد