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

دوره آموزش react native-آموزش Props در React Native

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

PropsدرReact Native

اغلب component ها هنگام initialize می توانند با پارمترهای مختلفی سفارشی سازی شوند. این پارامترهای زمانِ ساخت، Props نامیده می شوند.

برای مثال، یک component اصلی در React Native، Image است. وقتی یک Image می سازید، می توانید از یک prop به نام source استفاده کنید و با مقداردهی به آن، تصویر موردنظرتان را تعیین کنید:


import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';
export default class Bananas extends Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
                        < Image source={pic} style={ {width: 193, height: 110} } / >

    );
  }
}
// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => Bananas);

به آکولاد استفاده شده در {pic} توجه کنید. آن ها متغیر pic را درون یک JSX می گنجانند. می توانید هر عبارت جاوااسکریپتی را با قرار دادن درون آکولاد، در JSX استفاده کنید.

component هایی که خود می سازید هم میتواند از props استفاده کند. این ویژگی به شما اجازه میدهد از یک component، اما با ویژگی های کمی متفاوت از یکدیگر، در جاهای مختلف application استفاده کنید. مثال زیر چگونگی این کار را ، با reference دادن به this.props در تابع render، نشان می دهد:



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

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
class Greeting extends Component {
  render() {
    return (
                        < View style={ {alignItems: 'center'} }>
                        < Text>Hello {this.props.name}!< /Text>
      < /View>
    );
  }
}
export default class LotsOfGreetings extends Component {
  render() {
    return (
                        < View style={ {alignItems: 'center', top: 50} }>
                        < Greeting name='Rexxar' />

                        < Greeting name='Jaina' />

                        < Greeting name='Valeera' />

      < /View>
    );
  }
}
// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => LotsOfGreetings);

استفاده از name به عنوان یک prop، به ما امکان سفارشی کردن component Greeting را می دهد، می توانیم از این component بارها با مقادیر مختلف استفاده کنیم. این مثال از این component، درست مثل component های اصلی، در JSX نیز استفاده می کند. این امکان دقیقا همان چیزی است که باعث جذابیت React شده. اگر حس کنید component های متفاوتی برای کارتان احتیاج دارید، می توانید خودتان آن ها را بسازید.

نکته جدید دیگری که در این کد می بینیم، component View است. Viewبه عنوان ظرفی برای component های دیگر استفاده می شود، و کنترل style و layout را ممکن می کند.

با استفاده از props و component های اصلی Text، Image، و View، می توانید صفحات ثابت زیادی درست کنید. برای اینکه بتوانید application خود را با دیتای متغیر بسازید، باید درمورد State ها بدانید.

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

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

ارسال

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

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