使用background的最好方法是十六进制代码#rrggbbaa，但它应该是十六进制。 例如:50%的不透明度意味着256/2 =128，然后将该值(128)在HEX中转换为80，在这里使用#00000080 80表示50%透明。

如果你有十六进制颜色，你可以将它转换为rgba并设置不透明度:

const hexToRgbA = (hex, opacity) => {
  let c;
  if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
    c = hex.substring(1).split('');
    if (c.length === 3) {
      c = [c[0], c[0], c[1], c[1], c[2], c[2]];
    }
    c = `0x${c.join('')}`;
    return `rgba(${[(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',')},${opacity})`;
  }
  throw new Error('Bad Hex');
};

const color = '#1f8b7f'; // could be a variable

return (
  <View style={{ backgroundColor: hexToRgbA(color, 0.1) }} />
)

帮助我的来源

你应该意识到当前存在的与iOS和RGBA背景的冲突。

Summary: public React Native currently exposes the iOS layer shadow properties more-or-less directly, however there are a number of problems with this: 1) Performance when using these properties is poor by default. That's because iOS calculates the shadow by getting the exact pixel mask of the view, including any tranlucent content, and all of its subviews, which is very CPU and GPU-intensive. 2) The iOS shadow properties do not match the syntax or semantics of the CSS box-shadow standard, and are unlikely to be possible to implement on Android. 3) We don't expose the layer.shadowPath property, which is crucial to getting good performance out of layer shadows. This diff solves problem number 1) by implementing a default shadowPath that matches the view border for views with an opaque background. This improves the performance of shadows by optimizing for the common usage case. I've also reinstated background color propagation for views which have shadow props - this should help ensure that this best-case scenario occurs more often. For views with an explicit transparent background, the shadow will continue to work as it did before ( shadowPath will be left unset, and the shadow will be derived exactly from the pixels of the view and its subviews). This is the worst-case path for performance, however, so you should avoid it unless absolutely necessary. Support for this may be disabled by default in future, or dropped altogether. For translucent images, it is suggested that you bake the shadow into the image itself, or use another mechanism to pre-generate the shadow. For text shadows, you should use the textShadow properties, which work cross-platform and have much better performance. Problem number 2) will be solved in a future diff, possibly by renaming the iOS shadowXXX properties to boxShadowXXX, and changing the syntax and semantics to match the CSS standards. Problem number 3) is now mostly moot, since we generate the shadowPath automatically. In future, we may provide an iOS-specific prop to set the path explicitly if there's a demand for more precise control of the shadow. Reviewed By: weicool

提交:https://github.com/facebook/react-native/commit/e4c53c28aea7e067e48f5c8c0100c7cafc031b06

为backgroundColor使用rgba值。

例如,

backgroundColor: 'rgba(52, 52, 52, 0.8)'

这将它设置为不透明度为80%的灰色，这是由不透明度小数0.8派生出来的。这个值可以是0.0到1.0之间的任何值。

添加React-Native版本0.64的参考

指定颜色

命名颜色:DOCS

在React Native中，你也可以使用颜色名称字符串作为值。 注意:React Native只支持小写的颜色名称。不支持大写的颜色名称。 透明的# 这是rgba(0,0,0,0)的快捷方式，与CSS3中一样。

因此你可以这样做:

background: {
    backgroundColor: 'transparent'        
},

这是一个快捷方式:

background: {
        backgroundColor: 'rgba(0,0,0,0)'            
    },

使用background的最好方法是十六进制代码#rrggbbaa，但它应该是十六进制。 例如:50%的不透明度意味着256/2 =128，然后将该值(128)在HEX中转换为80，在这里使用#00000080 80表示50%透明。