React Native 中文文档 - 颜色
就像 HTML 的 标签 的样式通过 style
属性来控制一样。 React Native 中的控件的布局和样式也是通过 style
属性来控制的。
但是这个样式并不是写在单独的 .css
文件中的 ( 虽然我们可以通过某些脚本助手这么做 ),而是通过 JavaScript 字典的方式来实现的。
React Native 中的控件的布局和样式中跟 颜色 相关的,比如 字体颜色 、边框颜色 、背景颜色 、阴影颜色 中的颜色值也完全适配 CSS 中的各种颜色格式
CSS 颜色格式
React Native 中的 颜色 采用的是 CSS
中的颜色,准确的说,就是可以使用以下几种颜色格式
红 - 绿 - 蓝
React Native 既支持 rgb
三颜色格式,同时也支持 rgba()
这种可以额外携带 透明度 的颜色值。
React Native 既支持 十六进制 的颜色格式,同时也支持 函数 来创建颜色
'#f0f'
| #rgb) - 支持缩写-
'#ff00ff'
| #rrggbb) - 完整的十六进制颜色 -
'rgb(255, 0, 255)'
- 函数创建颜色 -
'rgba(255, 255, 255, 1.0)'
- 同时含有透明度的颜色,注意,透明度的取值范围为[0,1.0]
-
'#f0ff'
| #rgba) - 同时支持rgba
的简写格式 '#ff00ff00'
| #rrggbbaa) -rgba
的完整的十六进制格式
色调 - 饱和度 - 亮度
色调-饱和度-亮度 格式,也就是传说中的 HSL
格式,同时支持带 透明度 和 不带透明度 两种
色调 - 饱和度 - 亮度 这种格式只有 函数 创建着一种方法,也就是说只有
hsl()
- 无透明度hsla()
- 支持透明度
'hsl(360, 100%, 100%)' 'hsla(360, 100%, 100%, 1.0)'
完全透明 transparent
在 HTML / CSS 中,如果要使背景完全透明,可以设置背景颜色为 transparent
这么好用的东西,React 中也是完整的保留了下来,也就是说我们可以将颜色设置为 transparent
来达到完全透明效果
哈哈,如果你熟悉 rgba()
,那么应该会知道,transparent
真实的颜色其实是 rgba(0,0,0,0)
颜色名
React Native 同时还支持 CSS3 中规定的各种 颜色名,比如 red
代表红色,green
代表绿色,black
代表黑色
完整的颜色名列表如下
预览 | 颜色名 | 十六进制颜色值 |
---|---|---|
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 |