【Facebook的UI开发框架React入门之七】多View布局与样式Style简介(iOS平台）-goodmao

---------------------------------------------------------------------------------------------------

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.子视图的对齐方式-水平方向

        属性： 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"

]