React Native 三:樣式

標籤：

一、聲明和使用樣式1.React Native裡面的樣式和使用如下面所示，StyleSheet.create這個建構函式不是必須的；

index.android.js檔案import React, {    … …} from ‘react-native‘;class AwesomeProject extends Component {  render() {    return (      <View>            //所有核心組件都可以接受style屬性           <Text style={styles.base}>Declare Style</Text>            //接受數組形式的多個style           <Text style={[styles.base, styles.background]}>Declare Style</Text>            //根據某些條件選擇性的添加樣式，否定型取值如false，undefined和null則會被忽略            <View style={[styles.base, true && styles.active]}/>            //可以在render方法中建立樣式，多個值衝突的時候，右邊的元素優先順序最高            <View style={[styles.background, styles.base, { width:80, height:80}]}/>       </View>    );  }}//聲明樣式var styles = StyleSheet.create({  base: {    width: 100,    height: 38,  },  background: {    backgroundColor: ‘#cccccc‘,  },  active: {    borderWidth: 2,    borderColor: ‘#00ff00‘,  },});AppRegistry.registerComponent(‘AwesomeProject‘, () => AwesomeProject);

二、Flexbox（彈性盒子模型）1.在布局上，React Native還實現了彈性盒子模型Flexbox。flexbox布局由伸縮容器和伸縮項目組成，任何一個元素都可以指定為flexbox布局；     其中設為display:flex或display:inline-flex的元素稱為伸縮容器；     伸縮容器的子項目稱為伸縮項目；2.和傳統的布局不一樣，它按照伸縮流的方向布局；3.預設情況下，伸縮容器由兩根軸組成，即主軸（main axis）和交叉軸（cross axis）；     其中主軸的開始位置叫main start，結束位置叫main end；     交叉軸的開始位置叫cross start，結束位置叫cross end；     伸縮項目在主軸上佔據的空間叫main size，在交叉軸上佔據的空間叫cross size；     根據設定的情況，主軸可以是水平軸，也可以是垂直軸；     不管那個軸作為主軸，預設情況下伸縮項目總是沿著主軸，從主軸開始位置到主軸結束位置進行排列；4.伸縮容器屬性    下面我們一實際的Demo來示範下相關屬性的作用；

 index.android.js檔案：     import React, {         … …        } from ‘react-native‘;     class AwesomeProject extends Component {         render() {              return (                   <View style={styles.flexcontain}>                       <View style={styles.flexitem}>                         <Text>1</Text>                       </View>                       <View style={styles.flexitem}>                         <Text>2</Text>                       </View>                       <View style={styles.flexitem}>                         <Text>3</Text>                       </View>                       <View style={styles.flexitem}>                         <Text>4</Text>                       </View>                       <View style={[styles.flexitem,styles.item5]}>                         <Text>5</Text>                       </View>                </View>              );            }     }     var styles = StyleSheet.create({          flexcontain: {               width:300,              height:300,              borderWidth:1,              borderColor:‘blue‘,              flexDirection:‘row‘,              top:100,              left:100,         },         flexitem: {              width:50,              height:50,              borderWidth:1,              borderColor:‘white‘,              backgroundColor:‘gray‘,              justifyContent:‘center‘,              alignItems:‘center‘,       },       item5: {         alignSelf:‘stretch‘,       },     });     AppRegistry.registerComponent(‘AwesomeProject‘, () => AwesomeProject);

     flexDirection：指定主軸的方向；          row：水平方向；          column：豎直方向；
     flexWrap：主軸線方向空間不足的情況下，是否換行以及應該如何換行；          wrap：空間不足的情況下允許換行，若主軸方向為水平方向，則從上到下；若主軸方向是為豎直方向，從左至右；          nowrap：即使空間不足，伸縮容器也不允許換行；

     justifyContent：伸縮項目沿主軸方向的對其方式；          flex-start：伸縮項目沿主軸線的對其方式；          flex-end：伸縮項目沿著主軸線的結束位置靠齊；          center：伸縮項目向主軸中間位置靠齊；          space-between：伸縮項目會平均地分配在主軸線裡，第一伸縮項目在主軸線的開始位置，最後一個項目在主軸線的終點位置；          space-around：伸縮項目會平均分布在主軸線裡，兩端保持一半的空間；


     alignItems：伸縮項目在伸縮容器的交叉軸上的對其方式；          flex-start：伸縮項目向交叉軸的起始的位置對齊；          flex-end：伸縮項目向交叉軸的結束位置對齊；          center：伸縮項目向交叉軸的中間位置對齊；

     alignSelf：設定單獨伸縮項目在交叉軸上的對齊；          auto：伸縮項目按照自身設定的寬高顯示；          flex-start：伸縮項目向交叉軸開始位置靠齊；          flex-end：伸縮項目向交叉軸的結束位置靠齊；          center：伸縮項目向交叉軸的中心位置靠齊；

     borderBottomWidth/borderRightWidth/borderTopWidth/borderTopWidth：底部邊框的寬度；
     margin/marginTop/marginBottom/marginLeft/marginRight：外邊距；     padding/paddingTop/paddingBottom/paddingLeft/paddingRight：內邊距；     left/top/right/bottom：左上方座標；     width/height：寬高； 三、將樣式作為參數傳遞      後期期待....

React Native 三:樣式