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

آموزش 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

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.