آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش Width و Height در React Native component-آموزش React Native

دوره های مرتبط با این مقاله

Widthو Height در React Native component

width وheight یک component تعیین کننده سایز آن روی صفحه است.

آموزش react

ابعاد ثابت

ساده ترین راه مقداردهی به ابعاد یک component مقداردهی ثابت به width و height در هنگام استفاده از style است. تمام ابعاد در React Native بدون واحد هستند، و نشان دهنده density-independent pixel هاهستند.


import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
export default class FixedDimensionsBasics extends Component {
  render() {
    return (
                        < View >
                        < View style={ {width: 50, height: 50, backgroundColor: 'powderblue'} } / >

                        < View style={ {width: 100, height: 100, backgroundColor: 'skyblue'} } / >

                        < View style={ {width: 150, height: 150, backgroundColor: 'steelblue'} } / >

      < /View >
    );
  }
}
// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);

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


آموزش React Native

ابعاد منعطف

استفاده از flex در هنگام تعریف style برای یک component، به این معناست که ابعاد آن می تواند برحسب میزان فضای موجود تغییر کند. معمولا از flex: 1 استفاده می شود؛ که به component می گوید فضای موجود را پر کند و آن را با component های دیگر که parent یکسانی دارند، متناسب به اشتراک می گذارد. هرچه مقدار بزرگتری به flex بدهیم، نسبت فضایی که component می گیرد، نسبت با component های sibiling، بیشتر خواهد بود.

یک component فقط زمانی می تواند بزرگ شود و فضای موجود را بگیرد که component parent آن، دارای ابعاد بیشتر از 0 باشد. اگر parent آن مقادیر ثابتی برای height و width و flex نداشته باشد، ابعادی معادل 0 دارد و component child آن با وجود داشتن flex، قابل مشاهده نخواهد بود.


import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
export default class FlexDimensionsBasics extends Component {
  render() {
    return (
      // Try removing the `flex: 1` on the parent View.
      // The parent will not have dimensions, so the children can't expand.
      // What if you add `height: 300` instead of `flex: 1`?
                        < View style={ {flex: 1} } >
                        < View style={ {flex: 1, backgroundColor: 'powderblue'} } / >

                        < View style={ {flex: 2, backgroundColor: 'skyblue'} } / >

                        < View style={ {flex: 3, backgroundColor: 'steelblue'} } / >

      < /View >
    );
  }
}
// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () = > FlexDimensionsBasics);

پس از اینکه یاد گرفتیم چطور سایز component را تغییر دهیم، زمان آن رسیده که بدانیم چطور آن را روی صفحه قرار دهیم.

  • 551
  •    0
  • تاریخ ارسال :   1398/05/28

دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .