摘要：表示在上的對(duì)齊方式，基于的頂部基于的底部基于的中部布滿(mǎn)整個(gè)。的屬性所占的比例大小。它允許項(xiàng)目中當(dāng)個(gè)和其他不一樣的對(duì)齊方式，會(huì)覆蓋的屬性。

React-Native 編寫(xiě)的應(yīng)用的樣式不是靠css來(lái)實(shí)現(xiàn)的，而是依賴(lài)javascript來(lái)為你的應(yīng)用來(lái)添加樣式，先不討論這樣做的好處與壞處，因?yàn)檫@個(gè)實(shí)現(xiàn)方法本身就存在著很多爭(zhēng)議，我們主要關(guān)注他的樣式的語(yǔ)法和特性。

var styles = StyleSheet.create({
    base: {
        width: 38,
        height: 38,
    },
    background: {
        backgroundColor: "#222222",
    },
    active: {
        borderWidth: 2,
        borderColor: ‘#ff00ff",
    },
});

從語(yǔ)法來(lái)看：調(diào)用了React-Native的一個(gè)構(gòu)造方法，傳入一個(gè)對(duì)象生成style，如果你寫(xiě)過(guò)React就應(yīng)該很熟悉這種寫(xiě)法，和React的React.createCladd()語(yǔ)法是一樣的，傳入對(duì)象的key就相當(dāng)于類(lèi)名（我是這么理解），每個(gè)類(lèi)也是一個(gè)對(duì)象，可以配置各種樣式參數(shù)，總體來(lái)說(shuō)和CSS的寫(xiě)法差不多，差別上把CSS的命名又“-”連字符改成駝峰寫(xiě)法，然后長(zhǎng)度不用加單位“px”，字符串比如色值需要加引號(hào)寫(xiě)成字符串。
其實(shí)也是和React的行內(nèi)樣式寫(xiě)法的語(yǔ)法一樣。

所有的核心組件都支持樣式屬性

當(dāng)你需要設(shè)置多個(gè)屬性類(lèi)的時(shí)候，可以傳入一個(gè)數(shù)組

在兩個(gè)樣式又沖突的情況下，以右邊的值優(yōu)先，有些情況下可以加一些條件判斷樣式是否加載，比如，

你也可以在組件中render樣式，然而這種做法不推薦，其實(shí)就像一般html頁(yè)面中行內(nèi)樣式不推薦一樣，

React-Native 采用flexbox布局方式，flexbox是css3引入的布局模型－－彈性盒子模型，旨在通過(guò)彈性的方式對(duì)齊和分布容器中的item，使其適應(yīng)不同的寬度和高度。

在 React-Native 中的flexbox 是css3中flexbox的一個(gè)子集，并不支持所有的flexbox屬性。
flexbox 布局分為flexbox container 和 flexbox item ：如下圖
RN_img_4.png
flexbox 是一個(gè)屬性的集合，有些是屬于container的有些是屬于item的。
可以看下面這幅圖：
RN_img_5.png
對(duì)于 container 有 main axis（主軸）和cross axis（交叉軸）。main size 和 cross size 分別是container主軸方向的交叉軸方向的寬度，main start 和 main end 分別是主軸的起始和結(jié)點(diǎn)，其他同理，container里面包含items。
下面介紹一下屬性：

flexDirection:‘row‘|‘column‘

主軸的方向，水平 | 垂直，默認(rèn)是 column ，item會(huì)按照主軸方向排列。

flexWrap:‘warp‘|‘nowrap’

flexbox 會(huì)默認(rèn)將所有元素基于一行，這個(gè)屬性表示是否折行。

alignItems:‘flex-start’|’flex-end’|’center’|‘stretch‘

表示item在 cross axis 上的對(duì)齊方式，基于cross axis的頂部｜基于cross axis的底部｜基于cross axis的中部｜布滿(mǎn)整個(gè)。

justifyContent:‘flex-start’|‘flex-end‘|‘center‘|‘space-between‘|’space-around’

表示item在 main axis 上的對(duì)齊方式，基于主軸開(kāi)始｜基于主軸結(jié)束｜居中｜左右兩邊對(duì)齊，item間隔相等｜每個(gè)item兩端間隔相等。

flex: num

item 所占的比例大小。

alignSelf:‘ flex-start ’ | ’ flex-end ’ | ’ center ’ | ‘ stretch ‘

它允許項(xiàng)目中當(dāng)個(gè)item和其他itemsyou不一樣的對(duì)齊方式，會(huì)覆蓋alignitems的屬性。

可以看我的個(gè)人blog的文章 阿城｜blog