8.1 样式参考手册

基础共用样式

• 颜色值
• 大小单位： 'rem'或者百分比， 推荐rem，虽然纯数字不报错，不推荐纯数字，推荐字符串，rem的说明链接

显示控制

opacity

• 可取值： 0-1的数字
• 作用： 控制元素的透明度

backgroundColor

• 可取值： 颜色值 （具体增加颜色参考链接）
• 作用： 控制元素的背景颜色

border样式

注意： border的样式需要同时设置3个才能生效， borderWidth, borderStyle, borderColor 其他的borderTopWidth, borderBottomWidth

borderStyle

• 可取值： solid | dotted| dashed
• 作用： 控制线条的样式

borderWidth

• 可取值：字符串或者数字 推荐字符串 比如 ：'1rem'
• 作用： 定义所有线条的宽度
• 详见： https://developer.mozilla.org/en-US/docs/Web/CSS/border-width

borderColor

• 可取值： 颜色值
• 作用： 控制线条的颜色

borderRightWidth

• 可取值：字符串或者数字 推荐字符串 比如 ：'1rem'
• 作用： 定义右边线条的宽度
• 详见： https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width

borderTopWidth

• 可取值：字符串或者数字 推荐字符串 比如 ：'1rem'
• 作用： 定义顶部线条的宽度
• 详见： https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width

borderBottomWidth

• 可取值：字符串或者数字 推荐字符串 比如 ：'1rem'
• 作用： 定义底部线条的宽度

• 详见： https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width

  borderLeftWidth

• 可取值：字符串或者数字 推荐字符串 比如 ：'1rem'

• 作用： 定义左边线条的宽度
• 详见： https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width

布局

alignItems

• 可取值 'flex-start', 'flex-end', 'center', 'stretch'
• 默认值： stretch
• 作用： 用于排列子元素，控制的是水平排列 https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

alignSelf

• 可取值： 'auto', 'flex-start', 'flex-end', 'center', 'stretch'
• 作用： 重写父元素定义的alignItem属性
• 详见 https://developer.mozilla.org/en-US/docs/Web/CSS/align-self

bottom

• 可取值：字符串或者数字 推荐字符串 比如 ：'1rem' 或者百分比
• 作用： 定义距离底部的距离， 在元素的position为absolute时生效
• 详见： https://developer.mozilla.org/en-US/docs/Web/CSS/bottom for more details of how top affects

flex

• 可取值： 数字
• 作用： 控制元素是否为flex占位，和flexDirection配合使用，flexDirection为row时，子元素水平排列，为column的时候，子元素垂直排列，注意View默认会被加上flex: 1,flexDirection为column，效果是View不写任何style的时候，

  如果一个元素的父元素定义了flex为1，那么子元素再定义flex: 1的时候，那么这个flex就是控制自己占的百分比，比如3个都是flex为1，那么3个元素都是占比1/3,如果是1： 2： 1，那么占比就是1/4,2/4,1/4。

• 详见： https://github.com/facebook/css-layout

flexDirection

• 可取值： 'row', 'row-reverse', 'column', 'column-reverse'
• 作用： 控制子元素排列的方式
• 详见： https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

flexWrap

• 可取值： 'wrap', 'nowrap'
• 作用： '控制子元素排列是否换行'
• 详见 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

height

• 可取值：字符串或者数字 推荐字符串 比如 ：'1rem'
• 作用： 定义高度
• 详见： https://developer.mozilla.org/en-US/docs/Web/CSS/height

justifyContent

• 可取值： 'flex-start', 'flex-end', 'center', 'space-between', 'space-around'
• 作用：定义子元素的垂直排列方式，取值为center的时候为垂直居中
• 详见： https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

left

• 可取值：字符串或者数字 推荐字符串 比如 ：'1rem'
• 作用： 定义左边宽度，当position为absolute时生效
• 详见： https://developer.mozilla.org/en-US/docs/Web/CSS/left

margin

• 可取值：字符串或者数字 推荐字符串 比如 ：'1rem'
• 作用： 定义边距
• 详见： https://developer.mozilla.org/en-US/docs/Web/CSS/margin

marginBottom

• 可取值：字符串或者数字 推荐字符串 比如 ：'1rem'
• 作用： 定义底部边距
• 详见： https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom

marginHorizontal （支持性待定）

• 可取值：字符串或者数字 推荐字符串 比如 ：'1rem'
• 作用： 定义水平的边距，左边和右边

marginLeft

• 可取值：字符串或者数字 推荐字符串 比如 ：'1rem'
• 作用： 定义左边距
• 详见：https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left

marginRight

• 可取值：字符串或者数字 推荐字符串 比如 ：'1rem'
• 作用： 定义右边距
• 详见： https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right

marginTop

• 可取值：字符串或者数字 推荐字符串 比如 ：'1rem'
• 作用： 定义顶部边距
• 详见：https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top

marginVertical （支持性待定）

• 可取值：字符串或者数字 推荐字符串 比如 ：'1rem'
• 作用： 定义垂直边距，顶部和底部

maxHeight

• 可取值：字符串或者数字 推荐字符串 比如 ：'1rem' ，百分比
• 作用：最大高度
• 详见： https://developer.mozilla.org/en-US/docs/Web/CSS/max-height

maxWidth

• 可取值：字符串或者数字 推荐字符串 比如 ：'1rem' ，百分比
• 作用：最大宽度
• 详见： https://developer.mozilla.org/en-US/docs/Web/CSS/max-width

minHeight

• 可取值：字符串或者数字 推荐字符串 比如 ：'1rem' ，百分比
• 作用：最低高度
• 详见：https://developer.mozilla.org/en-US/docs/Web/CSS/min-height

minWidth

• 可取值：字符串或者数字 推荐字符串 比如 ：'1rem' ，百分比
• 作用：最低宽度
• 详见：https://developer.mozilla.org/en-US/docs/Web/CSS/min-width

padding

• 可取值：字符串或者数字 推荐字符串 比如 ：'1rem'
• 作用：定义填充宽度
• 详见： https://developer.mozilla.org/en-US/docs/Web/CSS/padding

paddingBottom

• 可取值：字符串或者数字 推荐字符串 比如 ：'1rem'
• 作用：定义底部填充宽度
• 详见： https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom

paddingHorizontal （支持性待定）

• 可取值：字符串或者数字 推荐字符串 比如 ：'1rem'
• 作用：定义水平填充宽度 左边和右边

paddingLeft

• 可取值：字符串或者数字 推荐字符串 比如 ：'1rem'
• 作用： 定义左边填充宽度
• 详见： https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left

paddingRight

• 可取值：字符串或者数字 推荐字符串 比如 ：'1rem'
• 作用： 定义右边填充宽度
• 详见：https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right

paddingTop

• 可取值：字符串或者数字 推荐字符串 比如 ：'1rem'
• 作用： 定义顶部填充宽度
• 详见： https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top

paddingVertical （支持性未定）

• 可取值：字符串或者数字 推荐字符串 比如 ：'1rem'
• 作用： 定义垂直填充宽度，顶部和底部

position

• 可取值：'absolute', 'relative' 默认值： relative
• 作用： 控制定位，需要层叠元素的时候一般用absolute.
• 详见： https://github.com/facebook/css-layout

right

• 可取值：字符串或者数字 推荐字符串 比如 ：'1rem' ，百分比
• 作用： 定义右边的距离，当position为absolute时才有效
• 详见： https://developer.mozilla.org/en-US/docs/Web/CSS/right

top

• 可取值：字符串或者数字 推荐字符串 比如 ：'1rem' ，百分比
• 作用： 定义顶部的距离，当position为absolute时才有效
• 详见： https://developer.mozilla.org/en-US/docs/Web/CSS/top

width

• 可取值：字符串或者数字 推荐字符串 比如 ：'1rem' ，百分比
• 作用： 定义宽度
• 详见：https://developer.mozilla.org/en-US/docs/Web/CSS/width

zIndex

• 可取值： 数字
• 作用： 层叠元素时，控制层的叠加顺序
• 详见： https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

文本

以下属性需要加载<Text>标签才能生效

color

• 可取值： 颜色值， 类似于 #FFFFFF
• 作用： 控制文本的颜色

fontSize

• 可取值： rem字符串
• 作用，文字的大小，
• 注意： 每个text标签最好都增加这一属性，否则会出现不同设备字体大小不一样的情况

fontStyle

• 可取值： normal | italic
• 作用： 控制文本是否为斜体

fontWeight

• 可取值： normal | bold
• 作用： 控制文本是否加粗

textDecoration

• 可取值： none | underline | line-through
• 作用： 控制文本是否有装饰划线

textAlign

• 可取值： left | center | right
• 作用： 控制文本排列的方式

textOverflow

• 可取值： clip | ellipsis
• 作用： 控制文本溢出的时候怎么显示。

lines

• 可取值： 数字
• 作用： 这个属性配合textOverflow使用，控制溢出的行数，要把文本设置为一行，并在溢出的时候增加省略号，那么就用 textOverflow: 'ellipsis'和lines: 1即可。

Flex布局速查样式库 https://g.alicdn.com/nuke/doc-case/0.0.1/flex.html