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

填充

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','stretch')

自身对齐

alignSelf enum('auto','flex-start','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','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中文网

相关文章

导入moment 使用方式 年月日,时分秒 星期几 相对时间 7天后 2小时后 明天 将毫秒转换成年月日
@ 一、前言 为什么介绍redux-actions呢? 第一次见到主要是接手公司原有的项目,发现有之前的大佬在处理...
十大React Hook库 原文地址:https://dev.to/bornfightcompany/top-10-react-hook-libraries-4065 原文...
React生命周期 React的生命周期从广义上分为挂载、渲染、卸载三个阶段,在React的整个生命周期中提供很...
React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树,每一个节点可以将其称为VNode,用...
React中JSX的理解 JSX是快速生成react元素的一种语法,实际是React.createElement(component, props, ....