寬度單位和像素密度

　　react的寬度不支持百分比，設(shè)置寬度時不需要帶單位 {width: 10}， 那么10代表的具體寬度是多少呢?

　　不知道是官網(wǎng)文檔不全還是我眼瞎，反正是沒找到，那做一個實驗自己找吧：

　　默認用的是iPhone6的模擬器結(jié)果是：

　　我們知道iPhone系列的尺寸如下圖：

　　可以看到iphone 6的寬度為 375pt，對應(yīng)了上邊的375，由此可見react的單位為pt。 那如何獲取實際的像素尺寸呢? 這對圖片的高清化很重要，如果我的圖片大小為100*100 px. 設(shè)置寬度為100 * 100. 那在iphone上的尺寸就是模糊的。 這個時候需要的圖像大小應(yīng)該是 100 * pixelRatio的大小 。

　　react 提供了PixelRatio 的獲取方式

　　flex的布局

　　默認寬度

　　我們知道一個div如果不設(shè)置寬度，默認的會占用100%的寬度， 為了驗證100%這個問題， 做三個實驗

　　根節(jié)點上方一個View， 不設(shè)置寬度

　　固定寬度的元素上設(shè)置一個View， 不設(shè)置寬度

　　flex的元素上放一個View寬度， 不設(shè)置寬度

　　結(jié)果可以看到flex的元素如果不設(shè)置寬度， 都會百分之百的占滿父容器。

　　水平垂直居中

　　css 里邊經(jīng)常會做的事情是去講一個文本或者圖片水平垂直居中，如果使用過css 的flexbox當(dāng)然知道使用alignItems 和 justifyContent . 那用react-native也來做一下實驗

　　網(wǎng)格布局

　　網(wǎng)格布局實驗， 網(wǎng)格布局能夠滿足絕大多數(shù)的日常開發(fā)需求，所以只要滿足網(wǎng)格布局的spec，那么就可以證明react的flex布局能夠滿足正常開發(fā)需求

　　等分的網(wǎng)格

　　左邊固定， 右邊固定，中間flex的布局

　　嵌套的網(wǎng)格