مشخصات مقاله
آموزش 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 هاهستند.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | 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); < button ></ button > |
تعیین مقادیر ابعاد به این شکل برای 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، قابل مشاهده نخواهد بود.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | 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); < button ></ button > |
پس از اینکه یاد گرفتیم چطور سایز component را تغییر دهیم، زمان آن رسیده که بدانیم چطور آن را روی صفحه قرار دهیم.