Props ها در react native

سلام دوستان . در این آموزش متنی قصد داریم یاد بگیریم که Props ها چی هستند و کاربردشون چیه.انواع مختلفی از کامپوننت ها در react native وجود داره که هر یک از این کامپوننت ها یک وظیفه خاص داره.با استفاده ار Props ها ما میتونیم این کامپوننت ها رو سفارشی سازی کنیم.البته در ویدئو 5 دوره آموزش مقدماتیreact native مبحث Props ها در react native آموزش داده شده که میتونید این ویدئو رو مشاهده کنید.

برای مثال در این آموزش ما قصد داریم از کامپوننت Image برای نمایش تصویر در اپلیکیشن استفاده کنیم و برای کنترل تصویر از یک Prop به نام source استفاده کنیم.source کنترل میکنه که چه عکسی درون کامپوننت Image نمایش داده بشه.برای نمایش عکس میتونیم هم از local و هم از Http Url استفاده بکنیم.

کد کامل برنامه در فایل index.js

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);

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 (

);

}

AppRegistry.registerComponent('Myproject', () => Myproject);

در گام بعدی ما کامپوننت خودمون رو با استفاده از Props میسازیم.بنابراین در حال حاضر ما یک کامپوننت Text داریم که با استفاده از Props میتونیم در هر قسمت از اپلیکیشن این کامپوننت رو فراخوانی کنیم.

نمایش عکس های گوشی در react native (ری اکت نیتیو)

کد کامل برنامه در فایل index.js

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);

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>

);

}

// skip this line if using Create React Native App

AppRegistry.registerComponent('MyProject', () => MyProject);

در قطعه کد بالا چیکار کردیم:

در قطعه کد بالا ما یک کلاس اضافی به نام HelloClass ایجاد کردیم.درون این کلاس ما از کامپوننت Text استفاده کردیم.حالا ما این کامپوننت رو با استفاده از Prop به نام this.props.StudentName تنظیم کردیم.