【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>
);
}
});