Question

我ImageBackground的样式中有opacity: 0.6。这包装了我的其他组件。这种不透明性导致降低子组件的不透明度。如何覆盖子组件中的样式，如View。

Answer 1

您可以通过在该文件中对其应用样式来覆盖子组件中的样式。应用最新的样式是优先考虑的样式。例如，下面将呈现蓝色。

import React from "react";
import { render } from "react-dom";

const stylesA = {
  color: "red"
};

const stylesB = {
  color: "blue"
};

const B = () => <div style={stylesB}>hey there</div>;

const A = ({ children }) => (
  <div style={stylesA}>
    <B />
  </div>
);

render(<A />, document.getElementById("root"));

此处示例： https://codesandbox.io/s/vm6o1jx49l

Answer 2

场景是您无法覆盖Opacity属性。但为了达到我想要的目的，我跟着这个家伙说了什么

React-Native: Change opacity colour of ImageBackground

Answer 3

不要使用不透明度。在这样的背景颜色道具中使用它-

backgroundColor：'rgba（0，0，0，0.6）'

从父组件到子组件的React Native Opacity

3 个答案: