【Facebook的UI開發架構React入門之七】多View布局與樣式Style簡介(iOS平台）-goodmao

標籤：react   app   ios   javascript   react.native   

---------------------------------------------------------------------------------------------------React.native是facebook開源的一套基於JavaScript的開源架構，很方便用來開發行動裝置的app。而且，方便及時更新app的UI與資料，也很方便部署。goodmao希望協助大家迅速上手掌握！----------------------------------------------------------------------------------------------------
參考：樣式Style：http://facebook.github.io/react-native/docs/view.html#style視圖View：http://facebook.github.io/react-native/docs/style.html#content
顏色參考：http://www.w3school.com.cn/html/html_colors.asp源碼參考：Layout.h/.c檔案----------------------------------------------------------------------------------------------------
我們這一節繼續介紹UI的布局與樣式 Style。本節介紹下多個視圖View的樣式。
一、採用下面的例子來介紹： 

//1.設定模式'use strict'; //2.匯入庫var React = require('react-native'); //3.定義變數添加依賴項var {  AppRegistry,  StyleSheet,  View,} = React;//4.建立組件類var HelloReact = React.createClass({  //組件的渲染方法  //設定視圖 View  render: function() {    return (      <View style = {{backgroundColor: 'gray', width: 300, height:300, }}>              <View style = {{backgroundColor: 'yellow', width: 50, height: 50}}/>      </View>    );  }});//5.註冊AppRegistry.registerComponent('HelloReact', () => HelloReact);

二、多個視圖View的常用屬性
（1）邊緣距離     【區別】       margin：是本View視圖邊框，與其他視圖（非子視圖）的距離。               padding：是本View視圖的內容（子視圖），與本視圖邊框的距離。             1.距離其他視圖（非子視圖）的邊線距離        屬性：margin, marginTop, marginBottom, marginLeft, marginRight        類型：浮點數，可以為負數。           注意：若周圍無其他視圖，則是相對於父視圖的邊界線的距離        margin: 相對左邊和頂部視圖，左邊和頂部的距離        marginTop: 相對上部視圖，頂部的距離        marginBottom: 相對下部視圖，底部的距離        marginLeft: 相對左邊視圖，左邊的距離        marginRight: 相對右邊視圖，右邊的距離        marginVertical: 同 marginTop        marginHorizontal: 同 marginLeft         2.設定子視圖距離本視圖的邊線距離        屬性：padding, paddingTop, paddingBottom, paddingLeft, paddingRight,paddingVertical, paddingHorizontal        類型：浮點數，可以為負數。         作用：同1，不同之處在於，所有paddingX的屬性值，都是對當前視圖的子視圖而言的。
    【樣本】：     a.布局

  var HelloReact = React.createClass({ //建立組件類  //組件的渲染方法  //設定視圖 View  render: function() {    return (      <View style = {{backgroundColor: 'gray',                                 width: 300, height:300,                      marginHorizontal: 50,                          paddingLeft: 20,                            paddingTop: 50,                        flexDirection: 'row',                    }}>        <View style = {{backgroundColor: 'blue', width: 50, height: 50}}/>              </View>    );  }});

     b.         

    （2）子視圖的排列     1.子視圖的排列方向        屬性：flexDirection        類型：字串        取值：‘row‘ 按行排列；                   ‘column‘ 按列排列，預設是按列排列。        例如：flexDirection: ‘row‘,
     2.子視圖的對齊-垂直方向        屬性：justifyContent 垂直方向        類型：字串，        取值：‘center‘,  子視圖垂直置中排列；                   ‘flex-end‘,  子視圖從結束位置對齊（按行時，則從右邊對齊；按列時，則從底部開始對齊）；                   ‘space-around‘, 子視圖平均分布。                   ‘space-between‘, 子視圖平均分布。兩端保留子視圖與子視圖之間間距大小的一半。        例如：justifyContent: ‘center‘,  //垂直置中                          參考：http://caibaojian.com/flexbox-guide.html                   http://caibaojian.com/demo/flexbox/justify-content.html
    【樣本】：      a.樣式         同上例，參數：justifyContent: ‘flex-end‘      

<View style = {{backgroundColor: 'gray',                           width: 300, height:300,                             top: 20,                    flexDirection: 'row', //按行                 justifyContent: 'flex-end', //子視圖從結束位置對齊（按行時，則從右邊對齊；按列時，則從底部開始對齊）               }}>      <View style = {{backgroundColor: 'blue',   width: 50, height: 50}}/>              <View style = {{backgroundColor: 'yellow', width: 50, height: 50}}/>      <View style = {{backgroundColor: 'green',  width: 50, height: 50}}/></View>

      b.效果         
    【樣本】：      a.樣式         同上例，參數：justifyContent: ‘space-between‘,  //平均分布       b.效果         
    【樣本】：      a.樣式         同上例，參數：justifyContent: ‘space-around‘, //平均分布       b.效果         

     3.子視圖的對齊-水平方向        屬性：2-alignItems 水平方向        類型：字串，        取值：‘center‘,    子視圖置中排列；                   ‘flex-end‘, 子視圖從結束位置對齊（按行時，則從右邊對齊；按列時，則從底部開始對齊）；                   ‘stretch‘,   子視圖被展開        例如：alignItems: ‘center‘,       //水平置中
          【樣本】：      a.樣式         同上例，參數：         flexDirection: ‘column‘, //按列         alignItems:‘center‘,     //子視圖置中排列；      b.效果          
      a.樣式         同上例，參數：          flexDirection: ‘column‘, //按列              alignItems:‘flex-end‘,    //子視圖從結束位置對齊（按行時，則從右邊對齊；按列時，則從底部開始對齊）；       b.效果         
      a.樣式             

      <View style = {{backgroundColor: 'gray',                                 width: 300, height:300,                                   top: 20,                          flexDirection: 'column',  //按列                           alignItems: 'stretch', //子視圖被展開                                                     }}>            <View style = {{backgroundColor: 'blue',              height: 50}}/>                    <View style = {{backgroundColor: 'yellow', width: 50, height: 50}}/>            <View style = {{backgroundColor: 'green',  width: 50, height: 50}}/>      </View>

      b.效果         注意：對應的子視圖，不設定寬度 width，則會被展開。         
         注意：對應的子視圖，如果設定了width: 50，所以不會被展開。         
        注意：若方向修改為按行排列row，則沒有設定高度的子視圖，會將高度展開               a.樣式 

    <View style = {{backgroundColor: 'gray',                               width: 300, height:300,                                 top: 20,                        flexDirection: 'row', //按列                         alignItems:'stretch',  //子視圖被展開                                          }}>            <View style = {{backgroundColor: 'blue',   width: 50,           }}/>                    <View style = {{backgroundColor: 'yellow', width: 50, height: 50}}/>            <View style = {{backgroundColor: 'green',  width: 50, height: 50}}/>    </View>

            b.效果          

---------------------------------------------補充說明：React中的樣式屬性，跟CSS中的有所不同，可以查看官方文檔，也可以直接看源碼：檔案位置：React.xcodeproj項目中，React->Layout->Layout.c



注意：視圖View的所有屬性，可以參看源碼分析或者參考文檔說明：React-Doc-View

<View>在RCTView.h源碼中，可以看到：RCTView繼承了UIView
Valid keys: [
  "width",
  "height",
  "top",
  "left",
  "right",
  "bottom",
  "margin",
  "marginVertical",
  "marginHorizontal",
  "marginTop",
  "marginBottom",
  "marginLeft",
  "marginRight",
  "padding",
  "paddingVertical",
  "paddingHorizontal",
  "paddingTop",
  "paddingBottom",
  "paddingLeft",
  "paddingRight",
  "borderWidth",
  "borderTopWidth",
  "borderRightWidth",
  "borderBottomWidth",
  "borderLeftWidth",
  "position",
  "flexDirection",
  "flexWrap",
  "justifyContent",
  "alignItems",
  "alignSelf",
  "flex",
  "transform",
  "transformMatrix",
  "rotation",
  "scaleX",
  "scaleY",
  "translateX",
  "translateY",
  "backgroundColor",
  "borderColor",
  "borderTopColor",
  "borderRightColor",
  "borderBottomColor",
  "borderLeftColor",
  "borderRadius",
  "borderTopLeftRadius",
  "borderTopRightRadius",
  "borderBottomLeftRadius",
  "borderBottomRightRadius",
  "opacity",
  "overflow",
  "shadowColor",
  "shadowOffset",
  "shadowOpacity",
  "shadowRadius"]

【Facebook的UI開發架構React入門之七】多View布局與樣式Style簡介(iOS平台）-goodmao