آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش React Native-آموزش State ها در React Native

دوره های مرتبط با این مقاله

State ها در React Native


آموزش پروژه محور React Native

دو نوع دیتا وجود دارد که یک component را کنترل می کند: props و state. دیتای Props توسط component parent مقداردهی می شوند و در طول چرخه حیات component ثابت هستند. برای دیتای متغیر، از state استفاده می کنیم.

به طور کلی، باید state را در سازندهinitialize کنید، و سپس با فراخوانی setState مقدار آن را تغییر دهید.

برای مثال، می خواهیم متنی بسازیم که حالت blink داشته باشد. متن یک بار موقع ساخته شدن component مربوطه، مقداردهی می شود. پس متنی به تنهایی یک prop است. این مسئله که "متن دراین لحظه نمایش داده شود یا نشود" در طول زمان متغیر است، پس باید درون state نگه داری شود.


import React, { Component } from 'react';
import { Text, View } from 'react-native';
class Blink extends Component {
  componentDidMount(){
    // Toggle the state every second
    setInterval(() = > (
      this.setState(previousState = > (
        { isShowingText: !previousState.isShowingText }
      ))
    ), 1000);
  }
  //state object
  state = { isShowingText: true };
  render() {
    if (!this.state.isShowingText) {
      return null;
    }
    return (
                        < Text >{this.props.text}< /Text >
    );
  }
}
export default class BlinkApp extends Component {
  render() {
    return (
                        < View >
                        < Blink text='I love to blink' / >

                        < Blink text='Yes blinking is so great' / >

                        < Blink text='Why did they ever take this out of HTML' / >

                        < Blink text='Look at me look at me look at me' / >

      < /View >
    );
  }
}

در یک application واقعی، معمولا state را با یک timer مقداردهی نمی کنیم. ممکن است state را زمانی مقداردهی کنیم که دیتای جدیدی از server دریافت کرده باشیم، یا ورودی از کاربر گرفته باشیم. بعلاوه، می توان از یک state container مثل Redux یا Mobx برای کنترل دیتا استفاده کرد. دراین حالت، به جای صدا زدن setState به طور مستقیم، از Redux یا Mobx برای تغییر state استفاده می کنیم.

وقتی setState فراخوانی می شود، BlinkApp component خود را دوباره render می کند. با فراخوانیsetState از طریق Timer، کامپوننت با هر تغییر در Timer ، دوباره render می شود.

State در اینجا کاملا مشابه React عمل می کند. برای مطالعه بیشتر درمورد نحوه کار با state می توانید به React.Component API مراجعه کنید. تا اینجا اکثر مثال های ما متن های ساده ای بودند. برای ساختن چیزهای جذابتر، باید درمورد style بدانیم.

  • 188
  •    0
  • تاریخ ارسال :   1398/05/28

دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .