react-native 样式总结

布局

React-Native的布局是完全是用flex来实现。

flex的用法就不多说了,具体可参考阮一峰老师的这篇文章《flex布局:语法篇》,里面对flex的讲解非常详细;

需要注意的是:React-Native中的flex的相关属性不是完全依照w3c规范提供的各种值,对其中的某些属性值进行了阉割。

React-Native 的样式基本上是实现了 CSS 的一个子集,并且属性名不完全一致。

下面就借用《React-Native样式指南》中内容说明一下:

目录

Properties 属性


Text 文本(18)

属性名 取值 描述
color <color> 对应 CSS color 属性
fontFamily string 对应 CSS font-family 属性
fontSize <number> 对应 CSS font-size 属性
fontStyle normal, italic 对应 CSS font-style 属性,但阉割了 oblique 取值
fontWeight normal, bold 100~900 对应 CSS font-weight 属性,但阉割了 bolder, lighter 取值
lineHeight <number> 对应 CSS line-height 属性
textAlign auto, left, right, center, justifyiOS 对应 CSS text-align 属性,但增加了 auto 取值。当取值为 justify 时,在 Android 上会变为 left
textDecorationLine none, 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<br />Android <bool> Android在默认情况下会为文字额外保留一些padding,以便留出空间摆放上标或是下标的文字。对于某些字体来说,这些额外的padding可能会导致文字难以垂直居中。如果你把textAlignVertical设置为center之后,文字看起来依然不在正中间,那么可以尝试将本属性设置为false
textAlignVertical<br />Android auto, top, bottom, center 对应 CSS vertical-align 属性,增加了 auto 取值,center 取代了 middle,并阉割了 baseline, sub 等值
fontVariant<br />iOS small-caps, oldstyle-nums, lining-nums, tabular-nums, proportional-nums 对应 CSS font-variant 属性,但取值更丰富
letterSpacing<br />iOS <number> 对应 CSS letter-spacing 属性
textDecorationColor<br />iOS <color> 对应 CSS text-decoration-color 属性
textDecorationStyle<br />iOS solid, double, dotted, dashed 对应 CSS text-decoration-style 属性,但阉割了 wavy 取值
writingDirection<br />iOS auto, ltr, rtl 对应 CSS direction 属性,增加了 auto 取值

<a name="dimension"></a>

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 属性

<a name="positioning"></a>

Positioning 定位(6)

属性名 取值 描述
position absolute, 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)

属性名 取值 描述
borderStyle solid, 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 属性中的阴影透明度定义

<a name="background"></a>

Background 背景(1)

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

<a name="transform"></a>

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 属性
transformMatrix TransformMatrixPropType 类似于 CSStransform 属性的 matrix()matrix3d() 函数
backfaceVisibility visible, hidden 对应 CSS backface-visibility 属性

<a name="flexbox"></a>

Flexbox 弹性盒(9)

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

<a name="other"></a>

Other 其他

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

<a name="values"></a>

Valuse 取值

<a name="color"></a>

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个系统颜色

<a name="number"></a>

Number 数值

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

<a name="units"></a>

Units 单位

<a name="pt"></a>

Pt 点

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

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

<a name="pixelratio"></a>

PixelRatio 像素密度

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

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

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

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

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

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,387评论 25 707
  • 本文出自《React Native学习笔记》系列文章。 一款好的APP离不了一个漂亮的布局,本文章将向大家分享Re...
    CrazyCodeBoy阅读 37,391评论 3 278
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,725评论 1 92
  • 任何事情都有解决的办法 付出总会有回报 你说的内容反映的是思想 生活都很不容易,也无须处处刁难自己,但是,在此之前...
    橘子潘阅读 290评论 0 1
  • 民以食为天,吃饭是人生的第一件大事,人一辈子不就是为了一碗饭在奋斗吗。只不过以前的人只要吃饱就行,而现在的人追求地...
    北风吹来阅读 669评论 0 0