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

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

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

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

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

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

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

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

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

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

flexDirection:‘row‘|‘column‘

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

flexWrap:‘warp‘|‘nowrap’

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

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

表示item在 cross axis 上的對齊方式，基于cross axis的頂部｜基于cross axis的底部｜基于cross axis的中部｜布滿整個。

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

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

flex: num

item 所占的比例大小。

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

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

可以看我的個人blog的文章 阿城｜blog