[RN] React Native style -- 樣式的使用

React-Native 樣式的使用。

React-Native 編寫的應用的樣式不是靠css來實現的，而是依賴javascript來爲你的應用來添加樣式，先不討論這樣作的好處與壞處，由於這個實現方法自己就存在着不少爭議，咱們主要關注他的樣式的語法和特性。

1.聲明樣式:

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

從語法來看：調用了React-Native的一個構造方法，傳入一個對象生成style，若是你寫過React就應該很熟悉這種寫法，和React的React.createCladd()語法是同樣的，傳入對象的key就至關於類名（我是這麼理解），每一個類也是一個對象，能夠配置各類樣式參數，整體來講和CSS的寫法差很少，差異上把CSS的命名又「-」連字符改爲駝峯寫法，而後長度不用加單位「px」，字符串好比色值須要加引號寫成字符串。
其實也是和React的行內樣式寫法的語法同樣。

2.樣式的使用。

全部的核心組件都支持樣式屬性

<View style={style.base} />

當你須要設置多個屬性類的時候，能夠傳入一個數組

<View style={[style.base,style.backgroundColor]} />

在兩個樣式又衝突的狀況下，以右邊的值優先，有些狀況下能夠加一些條件判斷樣式是否加載，好比，

<View style={[style.base,this.state.active&&style.active]} />

你也能夠在組件中render樣式，然而這種作法不推薦，其實就像通常html頁面中行內樣式不推薦同樣，

<View
  style={[styles.base,{width:this.state.width, height:this.state.width*this.state.aspectRatio}]}
/>

3. 佈局 – flexbox

React-Native 採用flexbox佈局方式，flexbox是css3引入的佈局模型－－彈性盒子模型，旨在經過彈性的方式對齊和分佈容器中的item，使其適應不一樣的寬度和高度。

在 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 分別是主軸的起始和結點，其餘同理，container裏面包含items。
下面介紹一下屬性：

container的屬性：

flexDirection:‘row‘|‘column‘

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

flexWrap:‘warp‘|‘nowrap’

flexbox 會默認將全部元素基於一行，這個屬性表示是否折行。

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 上的對齊方式，基於主軸開始｜基於主軸結束｜居中｜左右兩邊對齊，item間隔相等｜每一個item兩端間隔相等。

item的屬性

flex: num

item 所佔的比例大小。

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

它容許項目中當個item和其餘itemsyou不同的對齊方式，會覆蓋alignitems的屬性。

能夠看個人我的blog的文章 阿城｜blog