React Native 之 颜色(七)

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

颜色相关的 API

  • PlatformColor 允许您引用平台的颜色系统。
  • DynamicColorIOS 是 iOS 特有的,可以让您指定在浅色或深色模式下使用哪些颜色。
javascript 复制代码
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)

相关推荐
伍哥的传说6 小时前
React 各颜色转换方法、颜色值换算工具HEX、RGB/RGBA、HSL/HSLA、HSV、CMYK
深度学习·神经网络·react.js
浪裡遊7 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
Misha韩10 小时前
React Native 初始化项目和模拟器运行
react native
前端小盆友12 小时前
从零实现一个GPT 【React + Express】--- 【3】解析markdown,处理模型记忆
gpt·react.js
Cacciatore->13 小时前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~13 小时前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
贵沫末14 小时前
React——基础
前端·react.js·前端框架
爱学习的茄子14 小时前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
10年前端老司机14 小时前
在React项目中如何封装一个可扩展,复用性强的组件
前端·javascript·react.js
sophie旭15 小时前
《深入浅出react开发指南》总结之 10.1 React运行时总览
前端·react.js·源码阅读