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

样式Style：http://facebook.github.io/react-native/docs/view.html#style

视图View：http://facebook.github.io/react-native/docs/style.html#content

本节介绍下多个视图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);

（1）边缘距离

     1.距离其他视图（非子视图）的边线距离

        属性：margin, marginTop, marginBottom, marginLeft, marginRight

        作用：同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.子视图的排列方向

     2.子视图的对齐方式-垂直方向

                  

        参考：http://caibaojian.com/flexbox-guide.html

                   http://caibaojian.com/demo/flexbox/justify-content.html

      b.效果

         

    【示例】：

      a.样式

         同上例，参数：justifyContent: ‘space-between‘,  //平均分布 

      b.效果

         

    【示例】：

      a.样式

         同上例，参数：justifyContent: ‘space-around‘, //平均分布 

      b.效果

         

     3.子视图的对齐方式-水平方向

         flexDirection: ‘column‘, //按列

         alignItems:‘center‘,     //子视图居中排列；

      b.效果

          

          flexDirection: ‘column‘, //按列    

          alignItems:‘flex-end‘,    //子视图从结束位置对齐（按行时，则从右边对齐；按列时，则从底部开始对齐）；

       b.效果

         

      <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"

]