颜色
React Native 中的组件是使用 JavaScript 进行样式化的。颜色属性通常与 Web 上的 CSS 工作方式相匹配。每个平台上关于颜色使用的一般指南如下:
颜色相关的 API
React Native 有几个颜色 API,旨在让您充分利用平台的设计和用户偏好。
- PlatformColor 允许您引用平台的颜色系统。
- DynamicColorIOS 是 iOS 特有的,可以让您指定在浅色或深色模式下使用哪些颜色。
颜色的表示形式
红-绿-蓝 (RGB)
React Native 支持 rgb()
和 rgba()
两种十六进制与函数方法
'#f0f'
(#rgb)'#ff00ff'
(#rrggbb)'rgb(255, 0, 255)'
'rgba(255, 255, 255, 1.0)'
色调-饱和度-亮度 (HSL)
也支持 hsl()
和 hsla()
函数方法:
'hsl(360, 100%, 100%)'
'hsla(360, 100%, 100%, 1.0)'
颜色值
React Native 还支持将颜色表示为int
值(以 RGB 颜色模式):
0xff00ff00
(0xrrggbbaa)
注意
这看起来可能与 Android Color 的整数表示类似,但在 Android 上的值是以 SRGB 颜色模式(0xaarrggbb)存储的。
全透明 transparent
全透明颜色值rgba(0,0,0,0)
有个单独的写法,和CSS3一致:
'transparent'
颜色名称
你还可以使用颜色名称来作为颜色值. React Native 遵循CSS3 规范:
信息
React Native 仅支持小写颜色名称。不支持大写颜色名称。
- aliceblue (
#f0f8ff
) - antiquewhite (
#faebd7
) - aqua (
#00ffff
) - aquamarine (
#7fffd4
) - azure (
#f0ffff
) - beige (
#f5f5dc
) - bisque (
#ffe4c4
) - black (
#000000
) - blanchedalmond (
#ffebcd
) - blue (
#0000ff
) - blueviolet (
#8a2be2
) - brown (
#a52a2a
) - burlywood (
#deb887
) - cadetblue (
#5f9ea0
) - chartreuse (
#7fff00
) - chocolate (
#d2691e
) - coral (
#ff7f50
) - cornflowerblue (
#6495ed
) - cornsilk (
#fff8dc
) - crimson (
#dc143c
) - cyan (
#00ffff
) - darkblue (
#00008b
) - darkcyan (
#008b8b
) - darkgoldenrod (
#b8860b
) - darkgray (
#a9a9a9
) - darkgreen (
#006400
) - darkgrey (
#a9a9a9
) - darkkhaki (
#bdb76b
) - darkmagenta (
#8b008b
) - darkolivegreen (
#556b2f
) - darkorange (
#ff8c00
) - darkorchid (
#9932cc
) - darkred (
#8b0000
) - darksalmon (
#e9967a
) - darkseagreen (
#8fbc8f
) - darkslateblue (
#483d8b
) - darkslategrey (
#2f4f4f
) - darkturquoise (
#00ced1
) - darkviolet (
#9400d3
) - deeppink (
#ff1493
) - deepskyblue (
#00bfff
) - dimgray (
#696969
) - dimgrey (
#696969
) - dodgerblue (
#1e90ff
) - firebrick (
#b22222
) - floralwhite (
#fffaf0
) - forestgreen (
#228b22
) - fuchsia (
#ff00ff
) - gainsboro (
#dcdcdc
) - ghostwhite (
#f8f8ff
) - gold (
#ffd700
) - goldenrod (
#daa520
) - gray (
#808080
) - green (
#008000
) - greenyellow (
#adff2f
) - grey (
#808080
) - honeydew (
#f0fff0
) - hotpink (
#ff69b4
) - indianred (
#cd5c5c
) - indigo (
#4b0082
) - ivory (
#fffff0
) - khaki (
#f0e68c
) - lavender (
#e6e6fa
) - lavenderblush (
#fff0f5
) - lawngreen (
#7cfc00
) - lemonchiffon (
#fffacd
) - lightblue (
#add8e6
) - lightcoral (
#f08080
) - lightcyan (
#e0ffff
) - lightgoldenrodyellow (
#fafad2
) - lightgray (
#d3d3d3
) - lightgreen (
#90ee90
) - lightgrey (
#d3d3d3
) - lightpink (
#ffb6c1
) - lightsalmon (
#ffa07a
) - lightseagreen (
#20b2aa
) - lightskyblue (
#87cefa
) - lightslategrey (
#778899
) - lightsteelblue (
#b0c4de
) - lightyellow (
#ffffe0
) - lime (
#00ff00
) - limegreen (
#32cd32
) - linen (
#faf0e6
) - magenta (
#ff00ff
) - maroon (
#800000
) - mediumaquamarine (
#66cdaa
) - mediumblue (
#0000cd
) - mediumorchid (
#ba55d3
) - mediumpurple (
#9370db
) - mediumseagreen (
#3cb371
) - mediumslateblue (
#7b68ee
) - mediumspringgreen (
#00fa9a
) - mediumturquoise (
#48d1cc
) - mediumvioletred (
#c71585
) - midnightblue (
#191970
) - mintcream (
#f5fffa
) - mistyrose (
#ffe4e1
) - moccasin (
#ffe4b5
) - navajowhite (
#ffdead
) - navy (
#000080
) - oldlace (
#fdf5e6
) - olive (
#808000
) - olivedrab (
#6b8e23
) - orange (
#ffa500
) - orangered (
#ff4500
) - orchid (
#da70d6
) - palegoldenrod (
#eee8aa
) - palegreen (
#98fb98
) - paleturquoise (
#afeeee
) - palevioletred (
#db7093
) - papayawhip (
#ffefd5
) - peachpuff (
#ffdab9
) - peru (
#cd853f
) - pink (
#ffc0cb
) - plum (
#dda0dd
) - powderblue (
#b0e0e6
) - purple (
#800080
) - rebeccapurple (
#663399
) - red (
#ff0000
) - rosybrown (
#bc8f8f
) - royalblue (
#4169e1
) - saddlebrown (
#8b4513
) - salmon (
#fa8072
) - sandybrown (
#f4a460
) - seagreen (
#2e8b57
) - seashell (
#fff5ee
) - sienna (
#a0522d
) - silver (
#c0c0c0
) - skyblue (
#87ceeb
) - slateblue (
#6a5acd
) - slategray (
#708090
) - snow (
#fffafa
) - springgreen (
#00ff7f
) - steelblue (
#4682b4
) - tan (
#d2b48c
) - teal (
#008080
) - thistle (
#d8bfd8
) - tomato (
#ff6347
) - turquoise (
#40e0d0
) - violet (
#ee82ee
) - wheat (
#f5deb3
) - white (
#ffffff
) - whitesmoke (
#f5f5f5
) - yellow (
#ffff00
) - yellowgreen (
#9acd32
)