React-Native 样式指南

发布于 2021-09-03 22:36:22 字数 15725 浏览 1196 评论 0

React-Native 的样式基本上是实现了 CSS 的一个子集,并且属性名不完全一致,所以当你开始在编写 React-Native 之前,可以先简要了解一下。

当前对应 RN 版本:v0.44。

Properties 属性

Text 文本(18)

属性名取值描述
color<color>对应 CSS color 属性
fontFamilystring对应 CSS font-family 属性
fontSize<number>对应 CSS font-size 属性
fontStylenormal, italic对应 CSS font-style 属性,但阉割了 oblique 取值
fontWeightnormal, bold 100~900对应 CSS font-weight 属性,但阉割了 bolder, lighter 取值
lineHeight<number>对应 CSS line-height 属性
textAlignauto, left, right, center, justifyiOS对应 CSS text-align 属性,但增加了 auto 取值。当取值为 justify 时,在 Android 上会变为 left
textDecorationLinenone, underline, line-through, underline line-through对应 CSS text-decoration-line 属性,但阉割了 overline, blink 取值
textShadowColor<color>对应 CSS text-shadow 属性中的颜色定义
textShadowOffset{
width:<number>,
height:<number>
}
对应 CSS text-shadow 属性中的阴影偏移定义
textShadowRadius<number>CSS 中,阴影的圆角大小取决于元素的圆角定义,不需要额外定义
includeFontPadding
Android
<bool>Android在默认情况下会为文字额外保留一些padding,以便留出空间摆放上标或是下标的文字。对于某些字体来说,这些额外的padding可能会导致文字难以垂直居中。如果你把textAlignVertical设置为center之后,文字看起来依然不在正中间,那么可以尝试将本属性设置为false
textAlignVertical
Android
auto, top, bottom, center对应 CSS vertical-align 属性,增加了 auto 取值,center 取代了 middle,并阉割了 baseline, sub 等值
fontVariant
iOS
small-caps, oldstyle-nums, lining-nums, tabular-nums, proportional-nums对应 CSS font-variant 属性,但取值更丰富
letterSpacing
iOS
<number>对应 CSS letter-spacing 属性
textDecorationColor
iOS
<color>对应 CSS text-decoration-color 属性
textDecorationStyle
iOS
solid, double, dotted, dashed对应 CSS text-decoration-style 属性,但阉割了 wavy 取值
writingDirection
iOS
auto, ltr, rtl对应 CSS direction 属性,增加了 auto 取值

Dimension 尺寸(6)

属性名取值描述
width<number>对应 CSS width 属性
minWidth<number>对应 CSS min-width 属性
maxWidth<number>对应 CSS max-width 属性
height<number>对应 CSS height 属性
minHeight<number>对应 CSS min-height 属性
maxHeight<number>对应 CSS max-height 属性

Positioning 定位(6)

属性名取值描述
positionabsolute, relative对应 CSS position 属性,但阉割了 static, fixed 取值
top<number>对应 CSS top 属性
right<number>对应 CSS right 属性
bottom<number>对应 CSS bottom 属性
left<number>对应 CSS left 属性
zIndex<number>对应 CSS z-index 属性

Margin 外部白(7)

属性名取值描述
margin<number>对应 CSS margin 属性,不同的是,它只能定义一个参数,如需分别定义上、右、下、左4个方位的外补白,可以通过下面的单向外部白属性
marginHorizontal<number>无对应的 CSS 属性。其效果相当于同时设置 marginRightmarginLeft
marginVertical<number>无对应的 CSS 属性。其效果相当于同时设置 marginTopmarginBottom
marginTop<number>对应 CSS margin-top 属性
marginRight<number>对应 CSS margin-right 属性
marginBottom<number>对应 CSS margin-bottom 属性
marginLeft<number>对应 CSS margin-left 属性

Padding 内部白(7)

属性名取值描述
padding<number>对应 CSS padding 属性,不同的是,它只能定义一个参数,如需分别定义上、右、下、左4个方位的内补白,可以通过下面的单向内部白属性
paddingHorizontal<number>无对应的 CSS 属性。其效果相当于同时设置 paddingRightpaddingLeft
paddingVertical<number>无对应的 CSS 属性。其效果相当于同时设置 paddingToppaddingBottom
paddingTop<number>对应 CSS padding-top 属性
paddingRight<number>对应 CSS padding-right 属性
paddingBottom<number>对应 CSS padding-bottom 属性
paddingLeft<number>对应 CSS padding-left 属性

Border 边框(20)

属性名取值描述
borderStylesolid, dotted, dashed对应 CSS border-style 属性,但阉割了 none, hidden, double, groove, ridge, inset, outset 取值,且无方向分拆属性
borderWidth<number>对应 CSS border-width 属性
borderTopWidth<number>对应 CSS border-top-width 属性
borderRightWidth<number>对应 CSS border-right-width 属性
borderBottomWidth<number>对应 CSS border-bottom-width 属性
borderLeftWidth<number>对应 CSS border-left-width 属性
borderColor<color>对应 CSS border-color 属性
borderTopColor<color>对应 CSS border-top-color 属性
borderRightColor<color>对应 CSS border-right-color 属性
borderBottomColor<color>对应 CSS border-bottom-color 属性
borderLeftColor<color>对应 CSS border-left-color 属性
borderRadius<number>对应 CSS border-radius 属性
borderTopLeftRadius<number>对应 CSS border-top-left-radius 属性
borderTopRightRadius<number>对应 CSS border-top-right-radius 属性
borderBottomLeftRadius<number>对应 CSS border-bottom-left-radius 属性
borderBottomRightRadius<number>对应 CSS border-bottom-right-radius 属性
shadowColor<color>对应 CSS box-shadow 属性中的颜色定义
shadowOffset{
width: <number>,
height: <number>
}
对应 CSS box-shadow 属性中的阴影偏移定义
shadowRadius<number>CSS 中,阴影的圆角大小取决于元素的圆角定义,不需要额外定义
shadowOpacity<number>对应 CSS box-shadow 属性中的阴影透明度定义

Background 背景(1)

属性名取值描述
backgroundColor<color>对应 CSS background-color 属性

Transform 转换(3)

属性名取值描述
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}]对应 CSS transform 属性
transformMatrixTransformMatrixPropType类似于 CSStransform 属性的 matrix()matrix3d() 函数
backfaceVisibilityvisible, hidden对应 CSS backface-visibility 属性

Flexbox 弹性盒(9)

属性名取值描述
flex<number>对应 CSS flex 属性,但只能为整数值
flexGrow<number>对应 CSS flex-grow 属性
flexShrink<number>对应 CSS flex-shrink 属性
flexBasis<number>对应 CSS flex-basis 属性
flexDirectionrow, row-reverse, column, column-reverse对应 CSS flex-direction 属性
flexWrapwrap, nowrap对应 CSS flex-wrap 属性,但阉割了 wrap-reverse 取值
justifyContentflex-start, flex-end, center, space-between, space-around对应 CSS justify-content 属性,但阉割了 stretch 取值。
alignItemsflex-start, flex-end, center, stretch对应 CSS align-items 属性,但阉割了 baseline 取值。
alignSelfauto, flex-start, flex-end, center, stretch对应 CSS align-self 属性,但阉割了 baseline 取值

Other 其他

属性名取值描述
opacity<number>对应 CSS opacity 属性
overflowvisible, hidden, scroll对应 CSS overflow 属性,但阉割了 auto 取值
elevation
Android
<number>CSS中没有对应的属性,只在 Android5.0+ 上有效
resizeModecover, contain, stretchCSS中没有对应的属性,可以参考 background-size 属性
overlayColor
Android
stringCSS中没有对应的属性,当图像有圆角时,将角落都充满一种颜色
tintColor
iOS
<color>CSS中没有对应的属性,iOS 图像上特殊的色彩,改变不透明像素的颜色

Valuse 取值

Color 颜色

React Native 支持了 CSS 中大部分的颜色类型:

  • #f00 (#rgb)
  • #f00c (#rgba):CSS 中无对应的值
  • #ff0000 (#rrggbb)
  • #ff0000cc (#rrggbbaa):CSS 中无对应的值
  • rgb(255, 0, 0)
  • rgba(255, 0, 0, 0.9)
  • hsl(360, 100%, 100%)
  • hsla(360, 100%, 100%, 0.9)
  • transparent
  • 0xff00ff00 (0xrrggbbaa):CSS 中无对应的值
  • Color Name:支持了 基本颜色关键字 和 拓展颜色关键字,但不支持 28个系统颜色;

Number 数值

React-Native 中,目前仅支持 Number 这一种长度取值。默认缺省了 pt 单位,详细请看 Units 单位 部分。

Units 单位

Pt 点

React-Native 中,并不支持百分比单位,目前只支持一种单位,即 pt 绝对长度单位,同时,你在定义时不需要加单位,例如:

<View style={{width: 100, height: 50}}></View>
var styles = StyleSheet.create({
  box: {
    width: 100,
    height: 50
  }
});

PixelRatio 像素密度

React-Native 中,访问设备像素密度的方法由 PixelRatio 类提供。

我们的应用通常都会运行在不同的设备上,并且这些设备的像素密度很有可能各不相同。这会造成一个现象就是:

  • 定义了元素的边框为 1像素,而实际上在不同像素密度的设备上结果不一样,比如:iPhone6 显示为 2像素,iPhone6 Plus 显示为 3像素
  • 对于一个图片来讲,因为设备的像素密度不同,它也需要对应不同尺寸的规则,以防止图片过小变得模糊;

根据像素密度指定边框厚度

出于对产品体验的一致性,我们会要求不论是在哪种设备上,其边框厚度都应该是相同的。一个取得物理上的相同边框厚度的好方法就是用逻辑尺寸除以像素密度比:

var styles = StyleSheet.create({
  box: {
    borderWidth: 1 / PixelRatio.get(),
    borderStyle: solid
  }
});

上述代码将保证你的应用在所有的设备上(像素密度),都获得 1像素 的边框厚度。PixelRatio 通过 get() 方法来返回设备的像素密度。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84961 人气
更多

推荐作者

书间行客

文章 0 评论 0

神妖

文章 0 评论 0

undefined

文章 0 评论 0

38169838

文章 0 评论 0

彡翼

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文