就像 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 格式，同时支持带 透明度 和 不带透明度 两种

色调 - 饱和度 - 亮度 这种格式只有 函数 创建着一种方法，也就是说只有

1. hsl() - 无透明度
2. 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 代表黑色

完整的颜色名列表如下