React Native Opacity от родительского к дочернему компоненту
У меня ImageBackground с opacity: 0.6 в стилях. Это обертывает другие мои компоненты. Эта непрозрачность привела к уменьшению непрозрачности дочерних компонентов. Как переопределить стиль в дочерних компонентах, таких как View.
Ответы 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
То же самое и с React Native. Кроме того, ваш код по ссылке не запускается, потому что вы не можете использовать компоненты React Native в Интернете, если вы не используете что-то вроде response-native-web. Вам необходимо разместить здесь весь соответствующий код.
Отлично. Я просто пытался показать код. Я делаю это для непрозрачности. Возможно, в этом случае непрозрачность не работает.
Дело в том, что вы не можете переопределить атрибут Opacity. Но для достижения того, чего я хочу, я последовал тому, что сказал этот парень
Не используйте непрозрачность. Используйте его в цветных реквизитах вроде этого -
backgroundColor:'rgba(0, 0, 0, 0.6)'
Это не помогает. Это пример для ReactJS. Я прошу React Native.