布局

React-Native的布局是完全是用flex來實現(xiàn)。

flex的用法就不多說了，具體可參考阮一峰老師的這篇文章《flex布局：語法篇》，里面對flex的講解非常詳細；

需要注意的是：React-Native中的flex的相關(guān)屬性不是完全依照w3c規(guī)范提供的各種值，對其中的某些屬性值進行了閹割。

React-Native 的樣式基本上是實現(xiàn)了 CSS 的一個子集，并且屬性名不完全一致。

下面就借用《React-Native樣式指南》中內(nèi)容說明一下：

目錄

• Properties 屬性
  • Text 文本
  • Dimension 尺寸
  • Positioning 定位
  • Margin 外部白
  • Padding 內(nèi)補白
  • Border 邊框
  • Background 背景
  • Transform 轉(zhuǎn)換
  • Flexbox 彈性盒
  • Other 其他
• Values 取值
  • Color 顏色
  • Number 數(shù)值
• Units 單位
  • Pt 點
• PixelRatio 像素密度

Properties 屬性

Text 文本（18）

<a name="dimension"></a>

Dimension 尺寸（6）

<a name="positioning"></a>

Positioning 定位（6）

Margin 外部白（7）

Padding 內(nèi)部白（7）

Border 邊框（20）

<a name="background"></a>

Background 背景（1）

<a name="transform"></a>

Transform 轉(zhuǎn)換（3）

<a name="flexbox"></a>

Flexbox 彈性盒（9）

<a name="other"></a>

Other 其他

<a name="values"></a>

Valuse 取值

<a name="color"></a>

Color 顏色

React Native 支持了 CSS 中大部分的顏色類型：

• #f00 (#rgb)
• #f00c (#rgba)：CSS 中無對應(yīng)的值
• #ff0000 (#rrggbb)
• #ff0000cc (#rrggbbaa)：CSS 中無對應(yīng)的值
• rgb(255, 0, 0)
• rgba(255, 0, 0, 0.9)
• hsl(360, 100%, 100%)
• hsla(360, 100%, 100%, 0.9)
• transparent
• 0xff00ff00 (0xrrggbbaa)：CSS 中無對應(yīng)的值
• Color Name：支持了 基本顏色關(guān)鍵字 和 拓展顏色關(guān)鍵字，但不支持 28個系統(tǒng)顏色；

<a name="number"></a>

Number 數(shù)值

在 React-Native 中，目前僅支持 Number 這一種長度取值。默認缺省了 pt 單位，詳細請看 Units 單位 部分。

<a name="units"></a>

Units 單位

<a name="pt"></a>

Pt 點

在 React-Native 中，并不支持百分比單位，目前只支持一種單位，即 pt 絕對長度單位，同時，你在定義時不需要加單位，例如：

<View style={{width: 100, height: 50}}></View>

var styles = StyleSheet.create({
    box: {
        width: 100,
        height: 50
    }
});

<a name="pixelratio"></a>

PixelRatio 像素密度

在 React-Native 中，訪問設(shè)備像素密度的方法由 PixelRatio 類提供。

我們的應(yīng)用通常都會運行在不同的設(shè)備上，并且這些設(shè)備的像素密度很有可能各不相同。這會造成一個現(xiàn)象就是：

• 定義了元素的邊框為 1像素，而實際上在不同像素密度的設(shè)備上結(jié)果不一樣，比如：iPhone6 顯示為 2像素，iPhone6 Plus 顯示為 3像素；
• 對于一個圖片來講，因為設(shè)備的像素密度不同，它也需要對應(yīng)不同尺寸的規(guī)則，以防止圖片過小變得模糊；

根據(jù)像素密度指定邊框厚度

出于對產(chǎn)品體驗的一致性，我們會要求不論是在哪種設(shè)備上，其邊框厚度都應(yīng)該是相同的。一個取得物理上的相同邊框厚度的好方法就是用邏輯尺寸除以像素密度比：

var styles = StyleSheet.create({
    box: {
        borderWidth: 1 / PixelRatio.get(),
        borderStyle: solid
    }
});

上述代碼將保證你的應(yīng)用在所有的設(shè)備上（像素密度），都獲得 1像素 的邊框厚度。PixelRatio 通過 get() 方法來返回設(shè)備的像素密度。