الألوان في 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)