Как установить фоновый цвет прозрачного изображения в React Native

Это стиль представления, который я использовал

backCover: {
  position: 'absolute',
  marginTop: 20,
  top: 0,
  bottom: 0,
  left: 0,
  right: 0,
}

В настоящее время он имеет белый фон. Я могу изменить backgroundColor, как я хочу, как '#343434', но он принимает только шестнадцатеричное значение max 6 для цвета, поэтому я не могу дать непрозрачность, например '#00ffffff'. Я попытался использовать непрозрачность, подобную этой

backCover: {
  position: 'absolute',
  marginTop: 20,
  top: 0,
  bottom: 0,
  left: 0,
  right: 0,
  opacity: 0.5,
}

но это уменьшает видимость содержимого представления. Итак, любые ответы?

Ответы

Ответ 1

Используйте rgba значение для backgroundColor.

Например,

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

Это устанавливает его в серый цвет с непрозрачностью 80%, который получается из десятичной точки непрозрачности, 0.8. Это значение может быть от 0.0 до 1.0.

Ответ 2

Следующее работает отлично:

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

Вы также можете попробовать:

backgroundColor: 'transparent'

Ответ 3

Попробуйте это backgroundColor: '#00000000' он установит прозрачный цвет фона, следует шестнадцатеричные коды #rrggbbaa

Ответ 4

Вы должны знать о текущих конфликтах, которые существуют с iOS и RGBA фонами.

Описание: публичный React Native в настоящее время предоставляет тень слоя iOS свойства более или менее напрямую, однако существует ряд проблемы с этим:

1) Производительность при использовании этих свойств по умолчанию низкая. Это потому что iOS вычисляет тень, получая точную пиксельную маску представление, включая любой полупрозрачный контент, и все его подпредставления, который очень загружает процессор и GPU. 2) Свойства тени iOS делают не соответствуют синтаксису или семантике стандарта CSS box-shadow, и вряд ли удастся реализовать на Android. 3) Мы не выставить свойство layer.shadowPath, которое имеет решающее значение для получения хорошая производительность из теней слоев.

Эта разница решает проблему номер 1) путем реализации по умолчанию shadowPath, который соответствует границе вида для видов с непрозрачным фон. Это улучшает производительность теней за счет оптимизации общий случай использования. Я также восстановил цвет фона распространение для представлений, у которых есть теневые опоры - это должно помочь убедитесь, что этот лучший сценарий встречается чаще.

Для представлений с явным прозрачным фоном тень будет продолжайте работать как раньше (shadowPath останется неустановленным, и тень будет получена точно из пикселей вида и его подпредставления). Это наихудший путь производительности, однако, так что вы должны избегать этого, если это абсолютно необходимо. Поддержка этого может быть отключен по умолчанию в будущем или вообще удален.

Для полупрозрачных изображений предлагается испечь тень в само изображение или используйте другой механизм для предварительной генерации тени. Для текстовых теней вы должны использовать свойства textShadow, которые работают кроссплатформенный и имеет гораздо лучшую производительность.

Проблема № 2) будет решена в будущем diff, возможно, переименование свойств iOS shadowXXX в boxShadowXXX и изменение синтаксис и семантика, соответствующие стандартам CSS.

Задача № 3) теперь в основном спорная, так как мы генерируем shadowPath автоматически. В будущем мы можем предоставить специфическую для iOS опору для установки путь явно, если есть потребность в более точном контроле тень.

Отзыв: weicool

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