React Native常用组件样式总结
发布时间:2020-12-15 03:33:43 所属栏目:百科 来源:网络整理
导读:作为一个JS、CSS、RN新手,总是会遇到各种样式。在不知道样式有些什么的情况下难以很好的绘制布局。所以这里整理了一下几个常用布局的样式。 View Style 支持Flexbox、ShadowPropTypesIOS、Transforms属性。 背面可见性 backfaceVisibility enum('visible','
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中文网 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |