الألوان في React Native
تُنسَّق المكونات في React Native باستخدام JavaScript. تتوافق خاصيات الألوان عادة مع كيفية عمل CSS على الويب.
أحمر-أخضر-أزرق (Red-green-blue)
يدعم React Native كلا من rgb()
وrgba()
بشكل الرموز السداسية العشرية (hexadecimal) والداليّة (functional):
-
'#f0f'
(#rgb) -
'#ff00ff'
(#rrggbb) 'rgb(255, 0, 255)'
'rgba(255, 255, 255, 1.0)'
-
'#f0ff'
(#rgba) -
'#ff00ff00'
(#rrggbbaa)
تدرج اللون وصفاؤه وإضاءته (Hue-saturation-lightness)
تحديد اللون عبر hsl()
وhsla()
مدعوم بالطريقة الداليّة (functional):
-
'hsl(360, 100%, 100%)'
-
'hsla(360, 100%, 100%, 1.0)'
transparent
هذا اختصار للّون الشفّاف rgba(0,0,0,0)
:
-
'transparent'
الألوان المُسمّاة
يمكنك كذلك استخدام أسماء الألوان كقِيَم. يتّبع إطار العمل React Native مواصفات CSS3:
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
)