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

در خدمت شما عزیزان هستیم با  آموزش flex در برنامه نویسی react native از وب سایت آموزش برنامه نویسی سورس باران. در جلسه هفتم آموزش ریکت نیتیو، یاد میگیرید که چجوری با flex در react native کار کنید .با استفاده از flex ما میتوانیم عرض و ارتفاع رو با توجه با اندازه صفحه نمایش دستگاه به صورت انعطاف پذیر مشخص کنیم. با ما همراه باشید…

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

برای قرار دادن اندازه های مختلف صفحه نمایش، React Native پشتیبانی از Flexbox را ارائه می دهد. ما از همان کد استفاده می کنیم که در بخش React Native – Styling استفاده کردیم. در این صورت فقط PresentationProject را تغییر خواهیم داد.

آموزش طرح بندی یا Layout در React Native

برای رسیدن به طرح مورد نظر، flexbox سه ویژگی اصلی را ارائه می دهد:

1. flexDirection
2. justifyContent
3. alignItems

جدول زیر گزینه های احتمالی را نشان می دهد.

The following table shows the possible options.

اگر می خواهید آیتم ها را عمودی تراز کنید و آنها را متمرکز کنید، می توانید از کد زیر استفاده کنید.

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

const Home = (props) => {
   return (
      <View style = {styles.container}>
         <View style = {styles.redbox} />
         <View style = {styles.bluebox} />
         <View style = {styles.blackbox} />
      </View>
   )
}

export default Home

const styles = StyleSheet.create ({
   container: {
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: 'grey',
      height: 600
   },
   redbox: {
      width: 100,
      height: 100,
      backgroundColor: 'red'
   },
   bluebox: {
      width: 100,
      height: 100,
      backgroundColor: 'blue'
   },
   blackbox: {
      width: 100,
      height: 100,
      backgroundColor: 'black'
   },
})

خروجی به شکل زیر می باشد:

اگر آیتم ها باید به سمت راست منتقل شوند و فاصله ها باید بین آنها اضافه شود، می توانیم از کد زیر استفاده کنیم :

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

const App = (props) => {
   return (
      <View style = {styles.container}>
         <View style = {styles.redbox} />
         <View style = {styles.bluebox} />
         <View style = {styles.blackbox} />
      </View>
   )
}

export default App

const styles = StyleSheet.create ({
   container: {
      flexDirection: 'column',
      justifyContent: 'space-between',
      alignItems: 'flex-end',
      backgroundColor: 'grey',
      height: 600
   },
   redbox: {
      width: 100,
      height: 100,
      backgroundColor: 'red'
   },
   bluebox: {
      width: 100,
      height: 100,
      backgroundColor: 'blue'
   },
   blackbox: {
      width: 100,
      height: 100,
      backgroundColor: 'black'
   },
})

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

در این آموزش متنی ما یک View والد با flex:1 اینجاد میکنیم. این استایل تمام عرض و ارتفاع صفحه را در بر میگیرد.سپس سه View فرزند را داخل View اصلی ایجاد میکنیم و با استفاده از flex عرض و ارتفاع را برای این سه View فرزند تقسیم میکنیم.

برای شروع ابتدا یک پروژه جدید ایجاد نمایید، سپس کامپوننت های StyleSheet و View در بلاک import را اضافه کنید

import { AppRegistry, View, StyleSheet } from 'react-native';

تگ View در بلاک render return را اضافه کنید

render() {
    return (
 
     <View>
 
       
 
      </View>
 
    );
  }

استایل flex:1 به View والد دهید

	render() {
    return (
     <View style={{flex :1 }}>
 
        
      </View>
    );
  }

در این قسمت View داخل View والد را اضافه می کنیم:

render() {
    return (
     <View style={{flex :1 }}>
 
        <View />
 
        <View />
 
        <View />
 
      </View>
    );
  }

تنظیم flex برای View های فرزند با استفاده از استایل:

render() {
return (
<View style={{flex :1 }}>
<View style={{flex :1, backgroundColor: '#FF5722'}} />
<View style={{flex :2, backgroundColor: '#673AB7'}} />
<View style={{flex :3, backgroundColor: '#FFEB3B'}} />
</View>
);
}

کد کامل برنامه در فایل index.js به همراه خروجی فایل را در زیر مشاهده می نمایید

import React, { Component } from 'react';
import { AppRegistry, View, StyleSheet } from 'react-native';
class Myproject extends Component {
render() {
return (
<View style={{flex :1 }}>
<View style={{flex :1, backgroundColor: '#FF5722'}} />
<View style={{flex :2, backgroundColor: '#673AB7'}} />
<View style={{flex :3, backgroundColor: '#FFEB3B'}} />
</View>
);
}
}
AppRegistry.registerComponent('Myproject', () => Myproject);

امیدواریم که این مطلب مورد توجه دوستان عزیز قرار گرفته باشد.همچنین از این لینک می توانید اطلاعات و تمرینات بیشتری داشته باشید. در زیر لیست جلسات قبل در دسترس می باشد

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

1. React Native یا ریکت نیتیو چیست؟
2. آموزش React Native – نصب و تنظیم محیط React Native
3. آموزش App در React Native
4. آموزش کار با State در React Native
5. آموزش کار با کامپوننت Props در React Native
6. آموزش استایل دهی در برنامه نویسی React Native

The post آموزش flex در برنامه نویسی react native appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

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

در خدمت شما عزیزان هستیم با آموزش استایل دهی در برنامه نویسی React Native از وب سایت آموزش برنامه نویسی سورس باران. در جلسه ششم آموزش ریکت نیتیو، استایل دهی در فریم ورک React Native و انواع استایل دهی مانند کامپوننت Container و Presentational کامپوننت را خواهیم داشت. با ما همراه باشید….

استایل دهی در React Native

برای استایل دهی در React Native چندین راه وجود دارد. شما می توانید از ویژگی style برای اضافه کردن styles inline استفاده کنید. با این حال، این بهترین روش نیست، زیرا این روش کد را سخت می تواند بخواند. در این فصل، از Stylesheet برای یک طراحی استفاده خواهیم کرد.

کامپوننت Container در ریکت نیتیو

در جلسات قبل هم راجب به کامپوننت Container صحبت و کار شده بود. در این بخش بصورت ساده تر نسبت به جلسات قبل کار می کنیم. به مثال زیر توجه نمایید

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import PresentationalComponent from './PresentationalComponent'

export default class App extends React.Component {
   state = {
      myState: 'This is my state'
   }
   render() {
      return (
         <View>
            <PresentationalComponent myState = {this.state.myState}/>
         </View>
      );
   }
}

کامپوننت Presentational در ریکت نیتیو

در مثال زیر ما StyleSheet را وارد می کنیم. در پایین فایل، ما StyleSheet را ایجاد می کنیم و آن را به styles ثابت اختصاص می دهیم. توجه داشته باشید که سبک های ما در camelCase هستند و ما از px یا٪ برای یک استایل طراحی استفاده نمی کنیم. برای اعمال سبک به متن ما باید ویژگی style = {styles.myText} را به عنصر Text اضافه کنیم.

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

const PresentationalComponent = (props) => {
   return (
      <View>
         <Text style = {styles.myState}>
            {props.myState}
         </Text>
      </View>
   )
}
export default PresentationalComponent

const styles = StyleSheet.create ({
   myState: {
      marginTop: 20,
      textAlign: 'center',
      color: 'blue',
      fontWeight: 'bold',
      fontSize: 20
   }
})

پس از اجرا برنامه خروجی زیر را مشاهده می کنیم

امیدواریم این جلسه از آموزش React Native مورد توجه دوستان و کاربران عزیز قرار گرفته باشد…

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

1. React Native یا ریکت نیتیو چیست؟
2. آموزش React Native – نصب و تنظیم محیط React Native
3. آموزش App در React Native
4. آموزش کار با State در React Native
5. آموزش کار با کامپوننت Props در React Native

The post آموزش استایل دهی در برنامه نویسی React Native appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

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

با آموزش کار با کامپوننت Props در React Native از وب سایت آموزش برنامه نویسی سورس باران در خدمت شما دوستان عزیز هستیم. در این آموزش خواهیم آموخت که که Props چیست و چه کاربردی دارد. با ما همراه باشید…

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

در این مطلب توضیحاتی راجع به کامپوننت Props در React Native و کامپوننت Container و همچنین کامپوننت Presentational در React Native رو خواهیم داشت.

کامپوننت Props در React Native

در این آموزش می آموزید که چگونه state و Props را ترکیب کنید. اجزای Presentational باید تمام داده ها را با عبور props ها دریافت کنند. فقط اجزای container باید وضعیت داشته باشند.

حالا کامپوننت Container را به روز می کنیم. این کامپوننت state را اداره می کند و Props ها را به کامپوننت های presentational منتقل می کند. کامپوننت کانتینری تنها برای مدیریت state استفاده می شود. تمام قابلیت های مربوط به نمایش (ظاهر و غیره) در مولفه های presentational نشان داده می شود.

مثال کامپوننت Props در برنامه نویسی React Native

اگر ما بخواهیم از مثال جلسات قبل استفاده کنیم، باید عنصر Text را حذف کنیم و متن را از تابع render ، زیرا این عنصر برای ارائه متن به کاربران استفاده می شود.

app.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import PresentationalComponent from './PresentationalComponent'

export default class App extends React.Component {
   state = {
      myState: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, used do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
      nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
      aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
      nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
      officia deserunt mollit anim id est laborum.'
   }
   updateState = () => {
      this.setState({ myState: 'The state is updated' })
   }
   render() {
      return (
         <View>
            <PresentationalComponent myState = {this.state.myState} updateState = {this.updateState}/>
         </View>
      );
   }
}

مثال کامپوننت Presentational در React Native

در این قسمت درک می کنیم که یک مولفه Presentational چیست و همچنین چگونه کار می کند.

اجزاء Presentational  باید فقط برای ارائه نمایش به کاربران استفاده شوند. این کامپوننت state را ندارند آن ها تمام داده ها و عملکردها را به عنوان props دریافت می کنند. بهترین روش این است که از کامپوننت presentational به همان اندازه که ممکن است استفاده شود.

در حال حاضر، ما همان تابع را در فصل State داریم. تنها تفاوت این است که ما کد را به کانتینر و کامپوننت presentational اصلاح کردیم. شما می توانید برنامه را اجرا کنید و متن را مانند تصویر زیر مشاهده کنید.

اگر بر روی متن کلیک کنید، از صفحه حذف خواهد شد.

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

انواع مختلفی از کامپوننت ها در react native وجود داره که هر یک از این کامپوننت ها یک وظیفه خاص داره.با استفاده ار Props ها ما میتونیم این کامپوننت ها رو سفارشی سازی کنیم. در این آموزش ما قصد داریم از کامپوننت Image برای نمایش تصویر در اپلیکیشن استفاده کنیم و برای کنترل تصویر از یک Prop به نام source استفاده کنیم.

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

مثال  کامپوننت presentational در React Native

همانطور که در فصل قبلی ما اشاره کردیم، ما از نحو کارکرد تابع EC6 syntax برای کامپوننت presentational استفاده می کنیم. کامپوننت ما props ها را دریافت می کند،عناصر قابل نمایش را برمی گرداند، متن فعلی با استفاده از {props.myText} تابع {props.deleteText} را هنگامی که یک کاربر بر روی متن کلیک می کند، فراخوانی کند.

PresentationalComponent.js

import React, { Component } from 'react'
import { Text, View } from 'react-native'

const PresentationalComponent = (props) => {
   return (
      <View>
         <Text onPress = {props.updateState}>
            {props.myState}
         </Text>
      </View>
   )
}
export default PresentationalComponent

امیدواریم مورد توجه دوستان قرار گرفته باشد…

آموزش شماره 2 کار با 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);

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

کد کامل برنامه در فایل 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);

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

The post آموزش کار با کامپوننت Props در React Native appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.