从Firebase获取十六进制颜色码后如何设置透明背景？

方法一：将十六进制颜色转为RGBA格式（推荐，不影响子元素） #

从Firebase拿到的#E5E1FF是6位十六进制颜色，我们可以写个简单函数把它转成带透明度的RGBA格式，这样只有背景色透明，子元素不受影响：

// 转换函数：十六进制转RGBA
const hexToRgba = (hex, opacity) => {
  const cleanHex = hex.replace('#', '');
  const r = parseInt(cleanHex.slice(0, 2), 16);
  const g = parseInt(cleanHex.slice(2, 4), 16);
  const b = parseInt(cleanHex.slice(4, 6), 16);
  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
};

使用时直接调用函数，传入Firebase获取的颜色和你想要的透明度（比如0.5代表半透明）：

style={[styles.addItem, { backgroundColor: hexToRgba(item.color, 0.5) }]}

方法二：使用opacity属性（注意副作用） #

如果不在乎子元素也跟着透明，可以直接给元素加opacity样式，但要注意这个属性会让整个元素（包括里面的文字、图标等）都变透明：

style={[styles.addItem, { backgroundColor: item.color, opacity: 0.5 }]}

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