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

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

React.native是facebook开源的一套基于JavaScript的开源框架，

很方便用来开发移动设备的app。

而且，方便及时更新app的UI与数据，也很方便部署。

goodmao希望帮助大家迅速上手掌握！

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

参考：

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

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

颜色参考：http://www.w3school.com.cn/html/html_colors.asp

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

我们这一节简单分析一下UI的布局与样式 Style。

本节介绍下单个视图的样式。

一、采用下面的例子来介绍： 

//设置模式'use strict';//导入库var React = require</span>('react-native');//定义变量添加依赖项var {  AppRegistry,  StyleSheet,  View, } = React;//定义样式var styles = StyleSheet.create</span>({    //定义样式: View视图的    viewStyle: {    //是否拉伸    flex: 1, //0: 默认值，不填充；1: 填充满父视图(父容器)   },});//创建类var HelloReact = React.createClass ({ //创建组件类  //组件的渲染方法  //设置视图 View    render: function() {    return (      <View style = {styles.viewStyle}>      </View>    );  }});//注册AppRegistry.registerComponent('HelloReact', () => HelloReact);

二、单个视图View的常用属性

（1）视图颜色属性：

    1.视图背景色 backgroundColor

       类型：字符串。

       例如：backgroundColor: 'blue', //'#0000ff'-蓝色

       参考：http://www.w3school.com.cn/html/html_colors.asp

    2.透明度 opacity

       类型：浮点数。

       说明：0: 完全透明，看不到；

                  1: 完全不透明。

       例如：opacity: 0.8,

（2）伸缩性属性

       伸缩属性 flex 

       类型：整数。

       说明：0: 默认值，不拉伸填充；1: 拉伸并填充满父视图

       例如：flex: 1,

（3）视图的尺寸

       宽高度 width, height

       类型：浮点数，单位像素。

       例如：width: 200, 

                  height: 200,

    

   【注意】：

   1.View的默认尺寸为 (0, 0)

      若View 设置属性 flex: 0（或者未设置flex属性，默认为0），且未设置尺寸，且没有任何子视图，

      则该视图View默认尺寸为（0, 0），运行时，在屏幕上看不到。

   2.希望设置尺寸时，注意要将 flex 设置为0

      因为，如果属性 flex设置为1，则View会被拉伸充满父视图，而width和height尺寸失效。

      显然flex属性的优先级高。

（4）边缘设置

    1.边缘颜色 borderColor

       类型：字符串。

       例如：borderColor: 'green',

       参考：http://www.w3school.com.cn/html/html_colors.asp

    2.边缘宽度 borderWidth

       类型：浮点数，单位像素。

       例如：borderWidth: 9,

    3.边缘圆角半径 borderRadius

       类型：浮点数，单位像素。

       例如：borderRadius: 50, 

（5）示例一：

    1.样式：

    viewStyle : {    //1.是否拉伸    //flex: 0, //0: 默认值，不填充；1: 填充满父视图(父容器)     //2.颜色    backgroundColor: 'blue',//'#0000ff'-蓝色    //透明度    opacity: 0.8,    //3.尺寸    width: 200.5, //宽度    height: 200,  //高度    //4.边缘设置    borderColor: 'green', //边缘颜色    borderWidth: 9,       //边缘宽度，单位像素    borderRadius: 50,     //边缘圆角半径，单位像素  },

    2.运行效果图：

        

（6）指定位置

    1.坐标系属性 position

       类型：字符串

       1.1.绝对坐标

       从屏幕左上角为原点开始计算的坐标

       position: 'absolute',

       

       1.2.相对坐标

       position: 'relative', 

     2.坐标位置值 top, left, bottom, right

        类型：浮点数，可以为负数。

        注意：屏幕左上角为原点 (0, 0)。

        top: 从上至下，垂直方向，距离父视图顶部的距离值

        left: 从左至右，水平方向，距离父视图左边界的距离值

        bottom: 从上到下，垂直方向，距离父视图底部的距离值

        right:  从左至右，水平方向，距离父视图右边界的距离值

        例如：

                 top: 100, 

                 left: 100,

                 bottom: -20,

                 right:  20,

     3.距离父视图的边线距离 margin, marginTop, marginBottom, marginLeft, marginRight

        类型：浮点数，可以为负数。   

    

        margin: 相对左边视图，左边的距离

        marginTop: 相对上部视图，顶部的距离

        marginBottom: 相对下部视图，底部的距离

        marginLeft: 相对左边视图，左边的距离

        marginRight: 相对右边视图，右边的距离

    【区别】下节我们介绍 padding：

        padding：是本View视图的内容与本视图边框的距离；

        margin：是本View视图边框与其他元素的距离。

 

（7）示例二：

      

三、样式 Style 的写法

（1）统一设置一个视图元素的所有属性

      1.定义视图View的样式viewStyle

viewStyle: {    backgroundColor: 'blue', //背景色    opacity: 0.8, //透明度    width: 200.5, //宽度    height: 200,  //高度  },

      2.使用View的样式viewStyle：

var HelloReact = React.createClass({ //创建组件类  //组件的渲染方法  render: function() {    return (      <View style = { styles.viewStyle }>      </View>    );  }});

（2）分别设置一个视图元素的所有属性

    1.视图View的样式

  viewStyle : {    backgroundColor: 'blue', //背景色    opacity: 0.8, //透明度  },

    2.视图view的尺寸样式

  viewSize : {    width: 200.5, //宽度    height: 200,  //高度  },

    3.使用样式

var HelloReact = React.createClass ({ //创建组件类  //组件的渲染方法  //设置视图 View、Text、Image  render: function() {    return (      <View style = {[styles.viewStyle, styles.viewSize]}>      </View>    );  }});

（3）直接设置样式

    可以不预先定义样式，而直接给对应的视图设置样式。

    例如：

var HelloReact = React.createClass ({ //创建组件类  //组件的渲染方法  //设置视图 View  render: function() {    return (      <View style = {{backgroundColor: 'blue', width: 200, height: 200}}>      </View>    );  }});