作者:无敌腐女乐园 | 来源:互联网 | 2023-05-17 10:54
在React-Native内支持以下5种颜色写法:
rgb/rgba,如rgb(0, 0, 255)、rgba(0,0,255,1)
十六进制颜色(hex color),
如"#F00"(#r
在React-Native内支持以下5种颜色写法:
- rgb/rgba,如
rgb(0, 0, 255)
、rgba(0,0,255,1)
- 十六进制颜色(hex color),
如"#F00"
(#rgb)、#FF0000"
(#rrggbb)、#f0ff"
(#rgba)、#ff00ff00"
(#rrggbbaa)
- 色调-饱和度-亮度(Hue-saturation-lightness),
如"hsl(360, 100%, 100%)"
、"hsla(360, 100%, 100%, 1.0)"
- 透明度,
rgab(0,0,0,0)
的快捷写法:"transparent"
- 称谓颜色(Named colors),如
"red"
、"blue"
,遵循CSS3 规范
但是做原生拓展时,需要传入的颜色属性往往是 int
单一类型,对于多种可能的颜色格式再在原生代码中格式化肯定是不现实的,
fb团队也考虑到了这一点,通过开放normalizeColor.js
和processColor.js
2个文件进行处理。
normalizeColor.js
Libraries/Color/normalizeColor.js 或者
Libraries/StyleSheet/normalizeColor.js
-
描述
规范化颜色值统一输出
-
返回值
基于 http://www.w3.org/TR/css3-color/#svg-color 规范的int32Color
@Nullable
return int
-
Usage
// return 0xFF0000FF
normalizeColor("red");
normalizeColor("#F00");
-
版本问题
由于RN不同版本,normalizeColor.js文件路径不同,建议引用第三方npm库normalize-css-color@1.0.2
npm i normalize-css-color@1.0.2
+ import normalizeColor from 'normalize-css-color';
- import normalizeColor from 'react-native/Libraries/Color/normalizeColor'; // 0.57.8+
- import normalizeColor from 'react-native/Libraries/StyleSheet/normalizeColor'; //0.57.8-
processColor.js
Libraries/StyleSheet/processColor.js
Reference
更多补完文档请参阅https://github.com/React-Sextant/react-native-bridge-docs