高度與寬度
組件的高度與寬度決定了它在螢幕上的尺寸。
固定尺寸
設定組件尺寸的通用方法是在樣式中加入固定的 width
和 height
。React Native 中的所有尺寸都是無單位的,並且代表與密度無關的像素。
對於尺寸應始終固定為點數且不應根據螢幕尺寸計算的組件,這種尺寸設定方式很常見。
注意
點數與物理測量單位之間沒有通用的映射。這表示具有固定尺寸的組件在不同裝置和螢幕尺寸上可能不具有相同的物理尺寸。但是,對於大多數使用情況,這種差異是難以察覺的。
彈性尺寸
在組件的樣式中使用 flex
可以讓組件根據可用空間動態擴展和收縮。通常你會使用 flex: 1
,這會告訴組件填滿所有可用空間,並在其具有相同父組件的其他組件之間均勻分配。給定的 flex
值越大,組件相對於其兄弟組件將佔用的空間比例越高。
資訊
只有當組件的父組件的尺寸大於 0
時,組件才能擴展以填滿可用空間。如果父組件沒有固定的 width
和 height
或 flex
,則父組件的尺寸將為 0
,並且 flex
子組件將不可見。
在你能夠控制組件的尺寸之後,下一步是學習如何在螢幕上佈局它。
百分比尺寸
如果你想填滿螢幕的某個部分,但你 *不* 想使用 flex
佈局,你 *可以* 在組件的樣式中使用 **百分比值**。與彈性尺寸類似,百分比尺寸需要具有已定義尺寸的父組件。