Props ها در react native


سلام دوستان . در این آموزش متنی قصد داریم یاد بگیریم که Props ها چی هستند و کاربردشون چیه.انواع مختلفی از کامپوننت ها در react native وجود داره که هر یک از این کامپوننت ها یک وظیفه خاص داره.با استفاده ار Props ها ما میتونیم این کامپوننت ها رو سفارشی سازی کنیم.البته در ویدئو 5 دوره آموزش مقدماتیreact native مبحث Props ها در react native آموزش داده شده که میتونید این ویدئو رو مشاهده کنید.
برای مثال در این آموزش ما قصد داریم از کامپوننت Image برای نمایش تصویر در اپلیکیشن استفاده کنیم و برای کنترل تصویر از یک Prop به نام source استفاده کنیم.source کنترل میکنه که چه عکسی درون کامپوننت Image نمایش داده بشه.برای نمایش عکس میتونیم هم از local و هم از Http Url استفاده بکنیم.
کد کامل برنامه در فایل index.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import React, { Component } from 'react'; import { AppRegistry, Image } from 'react-native'; export default class Myproject extends Component { render() { let Image_Http_URL ={ uri: 'https://reactapp.ir/wp-content/uploads/reactapp2-2.png'}; return ( <Image source={Image_Http_URL} style = {{height: 200, resizeMode : 'center', margin: 5 }} /> ); } } AppRegistry.registerComponent('Myproject', () => Myproject); |
در گام بعدی ما کامپوننت خودمون رو با استفاده از Props میسازیم.بنابراین در حال حاضر ما یک کامپوننت Text داریم که با استفاده از Props میتونیم در هر قسمت از اپلیکیشن این کامپوننت رو فراخوانی کنیم.
کد کامل برنامه در فایل index.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import React, { Component } from 'react'; import { AppRegistry, Text, View } from 'react-native'; class HelloClass extends Component { render() { return ( <Text style={{marginTop : 10}}>Hello {this.props.StudentName} !</Text> ); } } export default class MyProject extends Component { render() { return ( <View style={{alignItems: 'center', marginTop : 20}}> <HelloClass StudentName='Pankaj' /> <HelloClass StudentName='Honey' /> <HelloClass StudentName='Sumit' /> </View> ); } } // skip this line if using Create React Native App AppRegistry.registerComponent('MyProject', () => MyProject); |
در قطعه کد بالا چیکار کردیم:
در قطعه کد بالا ما یک کلاس اضافی به نام HelloClass ایجاد کردیم.درون این کلاس ما از کامپوننت Text استفاده کردیم.حالا ما این کامپوننت رو با استفاده از Prop به نام this.props.StudentName تنظیم کردیم.
دیدگاهتان را بنویسید