Реагировать на непрозрачность родителя для родительского компонента

Question

Я ImageBackground с opacity: 0.6 в стилях.Это оборачивает мои другие компоненты.Эта непрозрачность привела к снижению непрозрачности дочерних компонентов.Как переопределить стиль в дочерних компонентах, таких как View.

Answer 1

Сцена в том, что вы не можете переопределить атрибут Opacity. Но для достижения того, чего я хочу, я следовал тому, что сказал этот парень

React-Native: изменить цвет непрозрачности ImageBackground

Answer 2

Не используйте прозрачность. Используйте его в фоновом режиме, как этот -

backgroundColor: 'rgba (0, 0, 0, 0.6)'

Answer 3

Вы можете просто переопределить стиль в дочернем компоненте, применив стиль к нему в этом файле. Стиль, примененный последним, является тем, которому дают приоритет. Например, ниже будет отображаться синим цветом.

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