react-native 之佈局篇

一.寬度單位和像素密度

　　react的寬度不支持百分比,設置寬度時不須要帶單位,那麼默認的單位是什麼呢?

　　　

 1 /**
 2  * Sample React Native App
 3  * https://github.com/facebook/react-native
 4  */
 5 'use strict';
 6 import React, {
 7   AppRegistry,
 8   Component,
 9   StyleSheet,
10   Text,
11   View,
12   Dimensions,
13   PixelRatio
14 } from 'react-native';
15 
16 class MyProject2 extends Component {
17      render (){
18          let {height,width}=Dimensions.get('window');
19          let pixelRatio=PixelRatio.get();
20          let {pheight,pwidth}={
21              pheight:PixelRatio.getPixelSizeForLayoutSize(200),
22              pwidth:PixelRatio.getPixelSizeForLayoutSize(100)
23          }
24          return(
25              <View>
26                  <Text>屏幕高度:{height}</Text>
27                  <Text>屏幕寬度:{width}</Text>
28                  <Text>dp(密度,與160px/inch的比值):{pixelRatio}</Text>
29                  <Text>200佈局高度轉化爲:{pheight}px</Text>
30                  <Text>100佈局寬度轉化爲:{pwidth}px</Text>
31              </View>
32          );
33      }
34 }
35 AppRegistry.registerComponent('MyProject2', () => MyProject2);

View Code

　　個人模擬器分辨率是768X1280的,獲取的是384X592,像素密度是2px/inch,這裏能夠肯定單位不是px,下面將200,100佈局高度轉換爲像素

　　都是x2的結果,能夠知道單位是密度了.至於上面的高度爲何不符合暫時保留問題.

二.Flex佈局

　　1.什麼是Flex佈局?佈局的傳統解決方案,是基於盒子模型,依賴display屬性+position屬性+float屬性,這種佈局方式對於特殊佈局很是不方便,

　　　好比,垂直居中就很差實現.2009年,W3c提出的Flex佈局,即彈性佈局,用來爲盒子模型提供最大的靈活性,任何一個容器均可以指定爲Flex佈局.

 

　　2.容器的屬性(6個)

　　　　ReatNative的flex佈局和web的略有不一樣,下面的這些屬性在RN中不用寫中間"-",而且第二個單詞 首字母大寫

　　　　flex-direction:子項目的在主軸的排列方式

　　　　　　　　　　row (默認值):主軸爲水平方向,起點在左端

　　　　　　　　　　row-reverse:主軸爲水平方向,起點在右端(RN彷佛不支持)

　　　　　　　　　　column:主軸爲垂直方向,起點在上沿

　　　　　　　　　　column-reverse:主軸爲垂直方向,起點在下沿(RN也不支持)

　　　　flex-wrap:默認,項目都排在一條線上(又稱"軸線")上

　　　　　　　　　　nowrap 不換行 (默認)| wrap換行 |wrap-reverse 換行,第一行在下方

　　　　　　　　　　RN彷佛也不支持

　　　　flex-flow:屬性是flex-direction和flex-wrap的簡寫形式,默認是row nowrap,RN沒試過

 

　　　　justify-content:定義項目在主軸上的對齊方式

　　　　　　　　　　flex-start(默認值) 左對齊 | flex-end (右對齊) | center(居中)  | space-between (兩端對齊,項目之間間隔相等)

　　　　　　　　　　| space-around (每一個項目兩側的間隔相等,因此項目之間的間隔比項目與邊框的間隔大一倍)

 

　　　　align-items:定義項目在交叉軸上如何對齊

　　　　　　　　　　flex-start (交叉軸的起點) | flex-end (終點) |  center(中點對齊) | baseline(項目的第一行文字的基線對齊)

　　　　　　　　　　| stretch (默認值)若是項目未設置高度 或者設爲auto,將佔滿整個容器

　　　　

　　　　align-content:定義了多根軸線的對齊方式,若是項目只有一根軸線,該屬性不起做用

　　　　　　　　　　　　flex-start | flex-end | center | space-between | space-around

　　　　

　　　　3.項目的屬性(6個)

　　　　　　order:定義項目的排列順序,數值越小,排列越靠前,默認爲0

　　　　　　flex-grow:定義項目的放大比例,默認爲0,即若是存在剩餘空間也不放大,若是都爲1,則他們將等分剩餘空間.若是一個爲2,其餘爲1,則前者佔據的剩餘空間比其餘

　　　　　　　　　　　　多一倍

　　　　　　flex-shrink:定義項目的縮小比例,默認爲1,即若是空間不足,項目將縮小.若是都爲1,等比縮小,若是一個爲0,其餘爲1,則前者不縮小,負值無效

　　　　　　flex-basis:定義在分配多餘空間以前,項目佔據的主軸空間,瀏覽器將根據這個屬性,計算主軸是否有多餘空間,它的默認值爲auto,即項目原本大小,也能夠設置

　　　　　　　　　　　　固定空間,即width和height

　　　　　　flex:是flex-grow,flex-shrink,flex-basis的簡寫,默認爲0 1 auto ,後兩個屬性可選,該屬性有快捷值,auto (1 1 auto) 和none (0 0 auto)

　　　　　　align-self:容許單個項目與其餘項目不同的對齊方式,可覆蓋align-items 屬性,默認值爲auto,表示繼承父元素的align-items屬性,沒有父元素則等

　　　　　　　　　　　　同於stretch

　　　　　　　　　　　　auto | flex-start | flex-end | center | baseline | stretch

　　　　　　圖片的屬性:

　　　　　　resizeMode 

cover:cover會被截斷

strech:stretch模式圖片被拉伸適應屏幕

contain:contain 模式容器徹底容納圖片，圖片自適應寬高

4.絕對定位與相對定位

　　　　不用在父容器中設置absolute或者relative,直接是相對於父容器定位

　　　　　　　　　　　　　　　　　 

　　　　參照這篇博客

　　　　RN佈局篇