ReactNative布局樣式總結

2021-09-20 05:17:00 字數 1560 閱讀 8150

flexnumber

用於設定或檢索彈性盒模型物件的子元素如何分配空間

flexdirectionenum('row', 'row-reverse' ,'column','column-reverse') 

flexdirection屬性決定主軸的方向,預設是「column」:

flexwrapenum('wrap', 'nowrap') 

軸線,wrap換行展示,nowrap不換行(可能會顯示不全);

justifycontentenum('flex-start', 'flex-end', 'center', 'space-between', 'space-around') 

alignitemsenum('flex-start', 'flex-end', 'center', 'stretch') 

alignselfenum('auto', 'flex-start', 'flex-end', 'center', 'stretch')

alignself決定了元素在父元素的次軸方向的排列方式(此樣式設定在子元素上),其值會覆蓋父元素的alignitems的值。

相關

resizemodeenum('cover', 'contain', 'stretch')

overflowenum('visible', 'hidden') 超出部分是否顯示,hidden為隱藏

tintcolor著色,rgb字串型別

opacity透明度

邊框寬度

邊框顏色

外邊距

內邊距

邊框圓角

陰影

布局

position

left/top/right/bottom 距「左/上/右/下」n個單位

box:
獲取當前螢幕寬、高

import  from 'react-native';

var = dimensions.get('window');

render()

螢幕的高度:);}

我的github:

出處:

React Native布局實戰

前輩教導我們,掌握一門新技術的最快方法是練習。因此,我找了下比較有愛,暖氣的介面。當然不是給美團打廣告了,只是覺得頁面蠻清新的。下面就是要顯示的效果 第三篇文章基本上對react native的布局基本上有個大致的認識,現在開工吧。總體上,該頁面分三個部分 1 我們約會吧及其右邊3欄 2 1元吃大餐...

React Native布局詳解

flexbox 布局 flex是flexible box的縮寫,意為 彈性布局 用來為盒狀模型提供最大的靈活性。採用flex布局的元素,稱為flex容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員,稱為flex專案 flex item 簡稱 專案 容器屬性 簡述 常用 ...

react native 樣式初學 (一)

最近看到了乙個新技術 react native 貌似國內還很少 於是我就也來學學 這篇一類文章記錄我學習react native的過程 react native的第乙個hello world 很簡單 貼出如下 use strict import react,from react native cla...