react-native 之布局篇

一.寬度單位和像素密度

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

　　　

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  Dimensions,
  PixelRatio
} from 'react-native';

class MyProject2 extends Component {
     render (){
         let {height,width}=Dimensions.get('window');
         let pixelRatio=PixelRatio.get();
         let {pheight,pwidth}={
             pheight:PixelRatio.getPixelSizeForLayoutSize(200),
             pwidth:PixelRatio.getPixelSizeForLayoutSize(100)
         }
         return(
             <View>
                 <Text>屏幕高度:{height}</Text>
                 <Text>屏幕寬度:{width}</Text>
                 <Text>dp(密度,與160px/inch的比值):{pixelRatio}</Text>
                 <Text>200布局高度轉化為:{pheight}px</Text>
                 <Text>100布局寬度轉化為:{pwidth}px</Text>
             </View>
         );
     }
}
AppRegistry.registerComponent('MyProject2', () => MyProject2);

　　我的模擬器分辨率是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布局篇