---------------------------------------------------------------------------------------------------
React.native是facebook开源的一套基于JavaScript的开源框架,
很方便用来开发移动设备的app。
而且,方便及时更新app的UI与数据,也很方便部署。
goodmao希望帮助大家迅速上手掌握!
----------------------------------------------------------------------------------------------------
参考:
---------- ---------- ---------- ---------- --
我们这一节简单分析一下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'-蓝色
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',
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>
);
}
});