React Native常用组件样式总结

最新推荐文章于 2025-03-26 13:42:37 发布

转载最新推荐文章于 2025-03-26 13:42:37 发布 · 61 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jshare/p/7651343.html

本文详细介绍了在React中如何使用样式属性，包括ViewStyle、ImageStyle、TextStyle等，特别关注了如何设置边框圆角、行高等样式，并提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在react 中，有时要使用 style 指定样式，如要跟随放大比例关系，展示图标。

const stylebutton = {width:25*scalesize, height:25*scalesize};

宽和高很容易，想用画个圆， border-radix 发现不能用，网上看了文章使用，要使用 borderRadius:25*scalesize

对应的行高 lineHeight:25*scalesize

------------------------------

还是需要看看怎么用， mark : http://blog.youkuaiyun.com/violetjack0808/article/details/51329554

也搬过来下。

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', '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中文网

转载于:https://www.cnblogs.com/jshare/p/7651343.html