بخش های اصلی

آموزش React Native

React Native – Flexbox

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

در این بخش از کدی مشابه کدی که در بخشِ React Native – استایل دادن  استفاده کردیم، استفاده می کنیم. تنها تغییری که در کد ایجاد می کنیم، اینه که MyPresentationalComponent را تغییر میدیم.

طرح بندی (Layout)

flexbox، برای رسیدن به طرح بندی دلخواه، سه پراپرتیِ مهم ارائه میده: flexDirection، justifyContent و alignItems.

در جدول زیر تمام آپشن ها آورده شده اند.

پراپرتی

مقادیر

توضیحات

flexDirection

'column', 'row'

اگه عناصر بصورت افقی یا عمودی چیده بشن، تعریف میشه.

justifyContent

'center', 'flex-start', 'flex-end', 'space-around', 'space-between'

برای تعیین نحوه ی توزیع عناصر در داخل container استفاده میشه.

alignItems

'center', 'flex-start', 'flex-end', 'stretched'

برای تعیین نحوه ی توزیع عناصر در محور دوم، در داخل container استفاده میشه. (برعکسِ flexDirection)

اگه بخوایم آیتم ها را بصورت عمودی بچینیم و آن ها را وسط چین کنیم، می توانیم مثل مثال زیر عمل کنیم:

src/components/myComponent/MyPresentationalComponent.js

مثال

import React, { Component } from 'react'

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

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

export default MyPresentationalComponent

const styles = StyleSheet.create ({
   container: {
      flex: 1,
      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'
   },
})

خروجی

react native flexbox center

اگه بخوایم عناصر را به سمت راست انتقال بدیم و بین آن ها فاصله (space) اضافه کنیم، می توانیم از کد زیر استفاده کنیم.

مثال

import React, { Component } from 'react'

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

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

export default MyPresentationalComponent

const styles = StyleSheet.create ({
   container: {
      flex: 1,
      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'
   },
})

خروجی

react native flexbox right

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

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش React Native

Learn React Native

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

تبلیغات

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد