在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
- 描述
由于Android使用32位 *signed* 整数表示颜色,所以需要对平台差异性进行额外处理。 - 返回值
Android: *signed* 32bit int
iOS: *unsigned* 32bit int - Usage
import { processColor } from 'react-native'; import normalizeColor from 'react-native/Libraries/Color/normalizeColor'; processColor(normalizeColor("#F00")); processColor(normalizeColor("red"));
Reference
更多补完文档请参阅https://github.com/React-Sextant/react-native-bridge-docs
网友评论