Referencja kolorów
Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →
Komponenty w React Native są stylowane przy użyciu JavaScriptu. Właściwości kolorów zwykle działają tak samo jak CSS w środowisku webowym. Ogólne wytyczne dotyczące użycia kolorów na każdej platformie znajdziesz poniżej:
API kolorów
React Native udostępnia kilka API kolorów, które pozwalają w pełni wykorzystać możliwości projektowe platformy i preferencje użytkowników.
-
PlatformColor umożliwia odwoływanie się do systemu kolorów platformy.
-
DynamicColorIOS jest specyficzny dla iOS i pozwala definiować kolory używane w trybie jasnym lub ciemnym.
Reprezentacje kolorów
Czerwony Zielony Niebieski (RGB)
React Native obsługuje rgb() i rgba() w notacji heksadecymalnej i funkcyjnej:
-
'#f0f'(#rgb) -
'#ff00ff'(#rrggbb) -
'#f0ff'(#rgba) -
'#ff00ff00'(#rrggbbaa) -
'rgb(255, 0, 255)' -
'rgb(255 0 255)' -
'rgba(255, 0, 255, 1.0)' -
'rgba(255 0 255 / 1.0)'
Barwa Nasycenie Jasność (HSL)
React Native obsługuje hsl() i hsla() w notacji funkcyjnej:
-
'hsl(360, 100%, 100%)' -
'hsl(360 100% 100%)' -
'hsla(360, 100%, 100%, 1.0)' -
'hsla(360 100% 100% / 1.0)'
Barwa Biel Czern (HWB)
React Native obsługuje hwb() w notacji funkcyjnej:
-
'hwb(0, 0%, 100%)' -
'hwb(360, 100%, 100%)' -
'hwb(0 0% 0%)' -
'hwb(70 50% 0%)'
Wartości całkowite kolorów
React Native obsługuje również kolory jako wartości całkowite int (w trybie kolorów RGB):
0xff00ff00(0xrrggbbaa)
Może to wyglądać podobnie do reprezentacji wartości całkowitych Color w Androidzie, ale na Androidzie wartości są przechowywane w trybie kolorów SRGB (0xaarrggbb).
Nazwane kolory
W React Native możesz również używać nazw kolorów jako wartości.
React Native obsługuje wyłącznie nazwy kolorów pisane małymi literami. Nazwy wielkimi literami nie są obsługiwane.
transparent
Jest to skrót dla rgba(0,0,0,0), tak samo jak w CSS3.
Słowa kluczowe kolorów
Implementacja nazwanych kolorów opiera się na specyfikacji CSS3/SVG:
-
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) -
ciemnoszary (
#a9a9a9) -
ciemnozielony (
#006400) -
ciemnoszary (
#a9a9a9) -
ciemny khaki (
#bdb76b) -
ciemna magenta (
#8b008b) -
ciemnooliwkowy (
#556b2f) -
ciemnopomarańczowy (
#ff8c00) -
ciemny storczyk (
#9932cc) -
ciemnoczerwony (
#8b0000) -
ciemny łosoś (
#e9967a) -
ciemny morski (
#8fbc8f) -
ciemny łupkowy (
#483d8b) -
ciemny łupkowy szary (
#2f4f4f) -
ciemny turkus (
#00ced1) -
ciemny fiolet (
#9400d3) -
głęboki róż (
#ff1493) -
głęboki błękit nieba (
#00bfff) -
przyciemniony szary (
#696969) -
przyciemniony szary (
#696969) -
jasny błękit (
#1e90ff) -
ceglasty czerwony (
#b22222) -
biały kwiatowy (
#fffaf0) -
zielony leśny (
#228b22) -
fuksja (
#ff00ff) -
jasnoszary (
#dcdcdc) -
ghostwhite (
#f8f8ff) -
złoty (
#ffd700) -
złotordzawy (
#daa520) -
szary (
#808080) -
zielony (
#008000) -
żółtozielony (
#adff2f) -
szary (
#808080) -
miodowy (
#f0fff0) -
gorący róż (
#ff69b4) -
czerwień indyjska (
#cd5c5c) -
indygo (
#4b0082) -
kość słoniowa (
#fffff0) -
khaki (
#f0e68c) -
lawendowy (
#e6e6fa) -
lawendowy rumieniec (
#fff0f5) -
zieleń trawnikowa (
#7cfc00) -
lemonkowy (
#fffacd) -
jasnoniebieski (
#add8e6) -
jasnokoralowy (
#f08080) -
jasny błękit (
#e0ffff) -
jasnozłoty (
#fafad2) -
jasnoszary (
#d3d3d3) -
jasnozielony (
#90ee90) -
jasnoszary (
#d3d3d3) -
jasnoróżowy (
#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) -
granatowy (
#000080) -
oldlace (
#fdf5e6) -
oliwkowy (
#808000) -
oliwkowozielony (
#6b8e23) -
pomarańczowy (
#ffa500) -
czerwono-pomarańczowy (
#ff4500) -
orchidea (
#da70d6) -
blady złocisty (
#eee8aa) -
bladozielony (
#98fb98) -
bladoturkusowy (
#afeeee) -
bladofioletowoczerwony (
#db7093) -
krem papai (
#ffefd5) -
brzoskwiniowy (
#ffdab9) -
peruwiański (
#cd853f) -
różowy (
#ffc0cb) -
śliwkowy (
#dda0dd) -
pudrowy niebieski (
#b0e0e6) -
purpurowy (
#800080) -
rebeccapurple (
#663399) -
czerwony (
#ff0000) -
różowobrązowy (
#bc8f8f) -
królewski niebieski (
#4169e1) -
brąz skórzany (
#8b4513) -
łososiowy (
#fa8072) -
piaskowy (
#f4a460) -
zielony morski (
#2e8b57) -
muszla (
#fff5ee) -
siena (
#a0522d) -
srebrny (
#c0c0c0) -
błękitny (
#87ceeb) -
niebieski łupkowy (
#6a5acd) -
szary łupkowy (
#708090) -
śnieżny (
#fffafa) -
wiosenna zieleń (
#00ff7f) -
stalowy niebieski (
#4682b4) -
opalenizna (
#d2b48c) -
morski (
#008080) -
ostowy (
#d8bfd8) -
pomidorowy (
#ff6347) -
turkusowy (
#40e0d0) -
fioletowy (
#ee82ee) -
pszeniczny (
#f5deb3) -
biały (
#ffffff) -
biały dym (
#f5f5f5) -
żółty (
#ffff00) -
żółtozielony (
#9acd32)