React Native Color返回值（返回int值）统一处理

[1uokun]

在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.js2个文件进行处理。

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