React|React Native常用组件样式总结
作为一个JS、CSS、RN新手，总是会遇到各种样式。在不知道样式有些什么的情况下难以很好的绘制布局。所以这里整理了一下几个常用布局的样式。View Style 支持Flexbox、ShadowPropTypesIOS、Transforms属性。
背面可见性
backfaceVisibility enum('visible', 'hidden')
背景颜色
backgroundColor string
边框颜色
borderColor string
borderTopColor string
borderRightColor string
borderBottomColor string
borderLeftColor string
边框圆角半径
borderRadius number
borderTopLeftRadius number
borderTopRightRadius number
borderBottomLeftRadius number
borderBottomRightRadius number
边框样式
borderStyle enum('solid', 'dotted', 'dashed')
边框宽度
borderWidth number
borderTopWidth number
borderRightWidth number
borderBottomWidth number
borderLeftWidth number
不透明度
opacity number
【React|React Native常用组件样式总结】填充
overflow enum('visible', 'hidden')
测试ID（用来定位视图）
testID string
Image Style 支持Flexbox和Transforms
调整大小模式
resizeMode Object.keys(ImageResizeMode)
背景颜色
backgroundColor string
边框属性
borderColor string
borderWidth number
borderRadius number
填充
overflow enum('visible', 'hidden')
色彩颜色
tintColor string
不透明度
opacity number
Text Style 支持View的样式
字体颜色
color string
字体
fontFamily string
字体大小
fontSize number
字体样式
fontStyle enum('normal', 'italic')
字体粗细（指定字体的粗细。大多数字体都支持’normal’和’bold’值。并非所有字体都支持所有的数字值。如果某个值不支持，则会自动选择最接近的值。）
fontWeight enum("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
字间距
letterSpacing number
行间距
lineHeight number
字体对齐方式（指定文本的对齐方式。其中’justify’值仅iOS支持。）
textAlign enum("auto", 'left', 'right', 'center', 'justify')
Flexbox Style 宽高
width number
height number
项目对齐
alignItems enum('flex-start', 'flex-end', 'center', 'stretch')
自身对齐
alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch')
边框宽度
borderBottomWidth number
borderLeftWidth number
borderRightWidth number
borderTopWidth number
borderWidth number
弹性伸缩
flex number
弹性伸缩方向
flexDirection enum('row', 'column')
弹性伸缩包裹
flexWrap enum('wrap', 'nowrap')
证明内容
justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')
外边距
margin number
marginBottom number
marginLeft number
marginRight number
marginTop number
marginHorizontal number
marginVertical number
内边距
padding number
paddingBottom number
paddingLeft number
paddingRight number
paddingTop number
paddingHorizontal number
paddingVertical number
位置（绝对、相对）
position enum('absolute', 'relative')
上下左右
right number
top number
left number
bottom number
Transform 属性变化
transform [{perspective: number}, {rotate: string}, {rotateX: string}, {rotateY: string}, {rotateZ: string}, {scale: number}, {scaleX: number}, {scaleY: number}, {translateX: number}, {translateY: number}, {skewX: string}, {skewY: string}]
属性矩阵
transformMatrix TransformMatrixPropType
参考资料 react native中文网
推荐阅读
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 数组常用方法一
- react|react 安装
- 常用git命令总结
- java|java 常用知识点链接
- React.js学习笔记(17)|React.js学习笔记(17) Mobx
- React.js的表单(六)
- 【React|【React Native填坑之旅】从源码角度看JavaModule注册及重载陷阱
- c#常用网址记录
- react-navigation|react-navigation 动态修改 tabBar 样式