目錄
一、介紹
二、**舉例
元件的高度和寬度決定了其在螢幕上顯示的尺寸。
元件的寬高分為兩種,指定寬高和彈性寬高
1.指定寬高
是指在樣式中指定固定的width
和height
。react native中的尺寸都是無單位的,表示的是與裝置畫素密度無關的邏輯畫素點。這樣在不同尺寸的螢幕上都顯示成一樣的大小。
2.彈性(flex)寬高
flex
可以使元件在可利用的空間中動態地擴張或收縮。一般而言我們會使用
flex:1
來指定某個元件擴張以撐滿所有剩餘的空間。
如果有多個並列的子元件使用了flex:1
,則這些子元件會平分父容器中剩餘的空間。
如果這些並列的子元件的flex
值不一樣,則元件佔據剩餘空間的比等於並列元件間flex
值的比
注意:元件能夠撐滿剩餘空間的前提是其父容器的尺寸不為零。如果父容器既沒有固定的width
和height
,也沒有設定flex
,則父容器的尺寸為零。其子元件如果使用了flex
,也是無法顯示的。
1.指定寬高
import react, from 'react';
export default class myprojectname extends component
};// 註冊應用(registercomponent)後才能正確渲染
// 注意:只把應用作為乙個整體註冊一次,而不是每個元件/模組都註冊
效果:
2.彈性寬高
更改核心類如下
export default class myprojectname extends component
};
效果
RN入門基礎6 使用Flexbox布局
flexbox可以指定某個元件的子元素的布局。flexbox可以在不同螢幕尺寸上提供一致的布局結構。一般來說,使用flexdirection justifycontent和alignitems三個樣式屬性就已經能滿足大多數布局需求。注意 react native中的flexbox的工作原理和web上...
RN彈性布局基礎篇
reactnative 中,可以使用 css3 的 flex布局,使用方法基本一樣,並且rn中,都是支援的.reactnative 不支援百分比的寬度,因此 設定寬度的時候,不需要寫 單位 style view q 既然不需要寫單位,那麼 100 指的是啥呢?100px 還是 100pt?單位是 p...
Python基礎入門5 函式
python 函式 函式是組織好的,可重複使用的,用來實現單一,或相關聯功能的 段。函式能提高應用的模組性,和 的重複利用率。你已經知道python提供了許多內建函式,比如print 但你也可以自己建立函式,這被叫做使用者自定義函式。定義乙個函式def functionname 引數 函式體retu...