如何从React Native Reanimated的interpolateColor获取RGB/HEX/RGBA值？

interpolateColor()返回的大数值是打包为32位整型的ARGB颜色值，四个颜色通道按透明度、红、绿、蓝的顺序从高位到低位排布，单通道取值范围0-255、占8位长度，通过位运算即可直接拆分出各通道值，不需要额外依赖。

拿到方法返回的整数后，直接执行位运算拆分四个通道：

const colorInt = interpolateColor(/* 传入你原本的调用参数 */);

const alpha = (colorInt >> 24) & 0xff;
const red = (colorInt >> 16) & 0xff;
const green = (colorInt >> 8) & 0xff;
const blue = colorInt & 0xff;

拆分出通道值后，可直接拼接为你需要的颜色格式，配合setState存储即可：

• RGB格式

  const rgbColor = `rgb(${red}, ${green}, ${blue})`;
  // 调用示例：setPickedColor(rgbColor)
  

• RGBA格式
  透明度如果需要0-1的标准取值，将通道值除以255即可：

  const rgbaColor = `rgba(${red}, ${green}, ${blue}, ${(alpha / 255).toFixed(2)})`;
  

• HEX格式
  单通道值转16进制时不足两位补前导0：

  const hexColor = `#${[red, green, blue].map(channel => 
    channel.toString(16).padStart(2, '0')
  ).join('')}`;
  // 需要带透明度的8位HEX时，将alpha放在数组首位即可
  

如果转换后出现颜色错位，调整通道的位移偏移量即可，该库返回值默认遵循原生平台ARGB整数颜色规范，上述偏移量可直接使用。

内容的提问来源于stack exchange，提问作者Enzo Barrera