React Native Color返回值(返回int值)统一处理

在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.jsprocessColor.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库[email protected]

    npm i [email protected]
    
    + 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

你可能感兴趣的:(React Native Color返回值(返回int值)统一处理)