آموزش کار با انیمیشن در ریکت نیتیو

0 دیدگاه

با جلسه چهاردهم از آموزش ریکت نیتیو، آموزش کار با انیمیشن در ریکت نیتیو از وب سایت آموزش برنامه نویسی سورس باران در خدمت شما هستیم. در این جلسه اجزا قابل لمس در فریم ورک ریکت نیتیو و توضیحاتی راجع به Touchable Native Feedback و Touchable Without Feedback داده شد.

آموزش کار با انیمیشن در ریکت نیتیو

ما myStyle را به عنوان ویژگی state تنظیم خواهیم کرد. این ویژگی برای طراحی یک عنصر در PresentationAnimationComponent استفاده می شود. ما همچنین دو عمل را ایجاد خواهیم کرد. expandElement و collapseElement. این توابع مقادیر state را به روز می کند. اولین بار از spring preset animation استفاده می کند در حالی که دومین بار از linear preset برخوردار است. ما این را نیز به عنوان props ها منتقل خواهیم کرد. دکمه های Expand و Collapse با عملکردهای ()expandElement و ()collapseElement فراخوانی می شوند.

در این مثال، عرض و ارتفاع جعبه را به طور پویا تغییر می دهیم. از آن جا که کامپوننت Home همان خواهد بود، ما تنها کامپوننت Animations را تغییر خواهیم داد. در این مثال، عرض و ارتفاع جعبه را به طور پویا تغییر می دهیم. از آن جا که کامپوننت Home همان خواهد بود، ما تنها کامپوننت Animations را تغییر خواهیم داد.

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

class Animations extends Component {
   componentWillMount = () =&gt; {
      this.animatedWidth = new Animated.Value(50)
      this.animatedHeight = new Animated.Value(100)
   }
   animatedBox = () =&gt; {
      Animated.timing(this.animatedWidth, {
         toValue: 200,
         duration: 1000
      }).start()
      Animated.timing(this.animatedHeight, {
         toValue: 500,
         duration: 500
      }).start()
   }
   render() {
      const animatedStyle = { width: this.animatedWidth, height: this.animatedHeight }
      return (
         &lt;TouchableOpacity style = {styles.container} onPress = {this.animatedBox}&gt;
            &lt;Animated.View style = {[styles.box, animatedStyle]}/&gt;
         &lt;/TouchableOpacity&gt;
      )
   }
}
export default Animations

const styles = StyleSheet.create({
   container: {
      justifyContent: 'center',
      alignItems: 'center'
   },
   box: {
      backgroundColor: 'blue',
      width: 50,
      height: 100
   }
})

import React, { Component } from 'react'

import { View, StyleSheet, Animated, TouchableOpacity } from 'react-native'

class Animations extends Component {

componentWillMount = () => {

this.animatedWidth = new Animated.Value(50)

this.animatedHeight = new Animated.Value(100)

}

animatedBox = () => {

Animated.timing(this.animatedWidth, {

toValue: 200,

duration: 1000

}).start()

Animated.timing(this.animatedHeight, {

toValue: 500,

duration: 500

}).start()

}

render() {

const animatedStyle = { width: this.animatedWidth, height: this.animatedHeight }

return (

<Animated.View style = {[styles.box, animatedStyle]}/>

</TouchableOpacity>

)

}

export default Animations

const styles = StyleSheet.create({

container: {

justifyContent: 'center',

alignItems: 'center'

box: {

backgroundColor: 'blue',

width: 50,

height: 100

}

})

لیست جلسات قبل آموزش React Native

React Native یا ریکت نیتیو چیست؟

آموزش React Native – نصب و تنظیم محیط React Native

آموزش App در React Native

آموزش کار با State در React Native

آموزش کار با کامپوننت Props در React Native

آموزش استایل دهی در برنامه نویسی React Native

آموزش flex در برنامه نویسی react native

آموزش لیست ویو در برنامه نویسی React Native

آموزش کار با TextInput در برنامه نویسی ریکت نیتیو

آموزش ScrollView در برنامه نویسی ریکت نیتیو

آموزش کار با تصاویر در برنامه نویسی ریکت نیتیو

آموزش HTTP در برنامه نویسی ریکت نیتیو

آموزش کار با Button در ریکت نیتیو

4/5 - (1 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات

برچسب ها: آموزش ریکت نیتیو

صابر بوستانی

داستان من با دنیای برنامه‌ نویسی آغاز شد، و در ادامه به عنوان یک توسعه‌ دهنده نرم‌ افزار، طراح وب سایت و متخصص سئو، مهارت ‌های تکنیکی و تحلیلی خودم رو پرورش دادم. علاقه م به دنیای مالی منو به سمت یادگیری ترید و معامله‌گری سوق داد. و در حال حاضر در برنامه نویسی و معامله گری ارز دیجیتال انجام میدم. از سال 96 سعی کردم معامله گری در کریپتو رو یاد بگیرم. ترید و معامله گری برام پر از چالش و شکست‌ های متعدد بود. اما هر شکست، درسی ارزشمند برام داشت و من رو به یک تریدر و معامله گر قوی‌ تر و هوشمندتر تبدیل کرد. با پشتکار و یادگیری مداوم، تونستم به موفقیت‌های قابل توجهی دست یابم و به معامله گری موفق تبدیل بشم. در اینجا بزرگترین تجربیات و مهمترین دانش خودم رو در اختیار شما قرار میدم تا در مدت زمان کوتاه تر و شکست های کمتر در این مسیر به موفقیت برسید.

دوره آموزش پروژه محور طراحی وب سایت پزشک یاب با بوت استرپ

منبع : سورس باران
رمز فايل : www.sourcebaran.com
انتشار: ۱۶ اردیبهشت ۱۴۰۰

آموزش کار با انیمیشن در ریکت نیتیو

آموزش کار با انیمیشن در ریکت نیتیو

صابر بوستانی

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ

مطالب مرتبط