React Native 之 颜色（七）

React Native 中的组件是使用 JavaScript 进行样式化的。颜色属性通常与 Web 上的 CSS 工作方式相匹配。

颜色相关的 API

• PlatformColor 允许您引用平台的颜色系统。
• DynamicColorIOS 是 iOS 特有的，可以让您指定在浅色或深色模式下使用哪些颜色。

PlatformColor(color1, [color2, ...colorN]);

DynamicColorIOS({
  light: color,
  dark: color,
  highContrastLight: color, // (optional) will fallback to "light" if not provided
  highContrastDark: color, // (optional) will fallback to "dark" if not provided
});

颜色的表示形式

红-绿-蓝 (RGB)
React Native 支持 rgb() 和 rgba() 两种十六进制与函数方法

• ‘#f0f’ (#rgb)
• ‘#ff00ff’ (#rrggbb)
• ‘rgb(255, 0, 255)’
• ‘rgba(255, 255, 255, 1.0)’

色调-饱和度-亮度 (HSL)
支持 hsl() 和 hsla() 函数方法：

• ‘hsl(360, 100%, 100%)’
• ‘hsla(360, 100%, 100%, 1.0)’

颜色值
React Native 还支持将颜色表示为int值（以 RGB 颜色模式）：

• 0xff00ff00 (0xrrggbbaa)
  //与 Android Color 的整数表示类似，但在 Android 上的值是以 SRGB 颜色模式（0xaarrggbb）存储的。

全透明 transparent
全透明颜色值rgba(0,0,0,0) 有个单独的写法，和CSS3一致：

• ‘transparent’

颜色名称
可以使用颜色名称来作为颜色值. React Native 遵循CSS3 规范；React Native 仅支持小写颜色名称。不支持大写颜色名称。

列如：blue (#0000ff)

原文地址：https://blog.csdn.net/qq_35876316/article/details/139053460

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！