React Native样式总结

写在前面的话，跟pc端相比，React Native很多都不支持，比如最简单的浮动；
这里将所有的React Native样式简单分了下类，加强下记忆。

flex布局类

• alignItems
• alignSelf
• flex flex-grow、flex-shrink、flex-basis（定义了在分配多余空间之前，项目占据的主轴空间，默认auto，项目的本来大小）
• flexDirection
• flexWrap
• justifyContent

border相关的样式

• borderColor
• borderRadius
• borderStyle
• borderWidth
• borderBottomColor
• borderBottomLeftRadius
• borderBottomRightRadius
• borderBottomWidth

同理 borderLeft等

布局相关

• margin、marginBottom、marginHorizontal、marginLeft、marginRight、marginTop、marginVertical
  marginHorizontal：设置相同的marginLeft、marginRight
• padding、paddingTop、paddingBottom、paddingHorizontal、paddingLeft、paddingRight、paddingVertical
• position
• top
• left
• right
• bottom
• overflow
• textAlign

元素相关属性

• height
• width
• lineHeight
• letterSpacing
• opacity

字体样式

• color
• fontFamily
• fontSize
• fontStyle 设置字体样式，有四个值，normal默认值，italic斜体，oblique倾斜，inherit继承
• fontWeight
• textDecorationColor
• textDecorationLine
• textDecorationStyle

颜色类

• backgroundColor
• tintColor是描述线条轮廓的一种颜色,该颜色默认具有传递性,默认状态下最底部的视图的tintcolor会一直往上面的视图传递,iso组件的一种样式

css3

• transformMatrix 定义 2D 转换，使用六个值的矩阵。包含数学函数，允许：旋转、缩放、移动以及倾斜元素。
• writingDirection
• translateX 定义转换，在X轴，
• translateY 定义转换、在Y轴
• transform 向元素应用2D或3D转换，该属性允许我们对元素进行旋转、缩放、移动或倾斜
• rotation，180deg
• scaleX， scaleY 设置2D缩放
• shadowColor、shadowOffset（水平，垂直）、shadowOpacity、shadowRadius（阴影半径）手机组件内部的属性，view相关

其他一些属性

• resizeMode 当Image的实际宽、高与图片的实际宽、高不符时,视图片样式定义中resizeMode的取值不同而分为三种情况, 三个取值分别是:

  contain, cover和stretch.默认值是cover。
  cover模式只求在显示比例不失真的情况下填充整个显示区域。可以对图片进行放大或者缩小，超出显示区域的部分不显示， 也就是说，图片可能部分会显示不了。

  contain模式是要求显示整张图片, 可以对它进行等比缩小, 图片会显示完整,可能会露出Image控件的底色。 如果图片宽高都小于控件宽高，则不会对图片进行放大。

  stretch模式不考虑保持图片原来的宽,高比.填充整个Image定义的显示区域,这种模式显示的图片可能会畸形和失真。

• backfaceVisibility 这是一个CSS3属性，backface-visibility 属性定义当元素不面向屏幕时是否可见（是旋转过后的）

style

一个通常的做法是根据某些条件选择性地添加样式。（如下面的代码，当this.state.active为false时，styles.active就会被忽略掉）

<View style={[styles.base, this.state.active && styles.active]} />

参考地址：

• http://www.runoob.com/w3cnote/flex-grammar.html
• http://www.w3school.com.cn/cssref/pr_backface-visibility.asp
• http://blog.csdn.net/bitian123/article/details/54629347
• http://reactnative.cn/docs/0.31/layout-props.html