RN入門基礎5 指定 彈性寬高

2021-08-21 23:43:25 字數 1163 閱讀 8439

目錄

一、介紹

二、**舉例

元件的高度和寬度決定了其在螢幕上顯示的尺寸。

元件的寬高分為兩種,指定寬高和彈性寬高

1.指定寬高

是指在樣式中指定固定的widthheight。react native中的尺寸都是無單位的,表示的是與裝置畫素密度無關的邏輯畫素點。這樣在不同尺寸的螢幕上都顯示成一樣的大小。

2.彈性(flex)寬高

flex可以使元件在可利用的空間中動態地擴張或收縮。一般而言我們會使用

flex:1來指定某個元件擴張以撐滿所有剩餘的空間。

如果有多個並列的子元件使用了flex:1,則這些子元件會平分父容器中剩餘的空間。

如果這些並列的子元件的flex值不一樣,則元件佔據剩餘空間的比等於並列元件間flex值的比

注意:元件能夠撐滿剩餘空間的前提是其父容器的尺寸不為零。如果父容器既沒有固定的widthheight,也沒有設定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...