React Native에서 뷰의 배경색을 투명하게 설정하는 방법

React Native에서 뷰의 배경색을 투명하게 설정하는 방법

---

이것은 내가 사용한 뷰의 스타일입니다.

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

현재 흰색 배경이 있습니다. 원하는대로 backgroundColor를 변경할 수 '#343434'있지만 색상에 대해 최대 6 헥스 값 만 허용하므로 불투명도를 줄 수 없습니다 '#00ffffff'. 이렇게 불투명도를 사용해 보았습니다

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

그러나 그것은보기의 내용의 가시성을 감소시킵니다. 그래서 대답이 있습니까?

---

사용 rgba가치를 backgroundColor.

예를 들면

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

이렇게하면 불투명도 십진수에서 파생 된 불투명도가 80 % 인 회색으로 설정됩니다 0.8. 이 값은에서 아무것도 할 수 있습니다 0.0로 1.0.

---

다음은 잘 작동합니다.

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

시도해 볼 수도 있습니다.

backgroundColor: 'transparent'

---

이것을 시도하면 backgroundColor: '#00000000'배경색이 투명하게 설정되며 #rrggbbaa 16 진수 코드를 따릅니다.

---

iOS 및 RGBA 배경에 존재하는 현재 충돌을 알고 있어야합니다.

요약 : 공개 React Native는 현재 iOS 레이어 섀도우 속성을 다소간 직접적으로 노출하지만 이에 대한 많은 문제가 있습니다.

1) 이러한 속성을 사용할 때의 성능은 기본적으로 좋지 않습니다. iOS는 모든 투명 콘텐츠와 모든 하위 뷰를 포함하여 뷰의 정확한 픽셀 마스크를 가져 와서 그림자를 계산하기 때문입니다. 이는 CPU 및 GPU 집약적입니다. 2) iOS 그림자 속성은 CSS box-shadow 표준의 구문 또는 의미와 일치하지 않으며 Android에서 구현할 수 없을 것입니다. 3) 우리는 layer.shadowPath레이어 그림자에서 좋은 성능을 얻는 데 중요한 속성을 노출하지 않습니다 .

이 diff는 shadowPath불투명 한 배경을 가진 뷰의 뷰 테두리와 일치 하는 기본값 을 구현하여 문제 1)을 해결 합니다. 이것은 일반적인 사용 사례에 최적화하여 그림자의 성능을 향상시킵니다. 또한 그림자 소품이있는 뷰에 대한 배경색 전파를 복원했습니다. 이렇게하면이 최상의 시나리오가 더 자주 발생하는 데 도움이됩니다.

명시 적으로 투명한 배경이있는 뷰의 경우 그림자는 이전과 같이 계속 작동합니다 ( shadowPath설정되지 않은 상태로 유지되고 그림자는 뷰 및 하위 뷰의 픽셀에서 정확히 파생 됨). 그러나 이것은 성능에 대한 최악의 경우 경로이므로 절대적으로 필요한 경우가 아니면 피해야합니다. 이에 대한 지원은 향후 기본적으로 비활성화되거나 완전히 중단 될 수 있습니다.

반투명 이미지의 경우 그림자를 이미지 자체에 굽거나 다른 메커니즘을 사용하여 그림자를 미리 생성하는 것이 좋습니다. 텍스트 그림자의 경우 크로스 플랫폼에서 작동하고 훨씬 더 나은 성능을 제공하는 textShadow 속성을 사용해야합니다.

문제 번호 2)는 iOS shadowXXX 속성의 이름을 boxShadowXXX로 변경하고 구문과 의미를 CSS 표준과 일치하도록 변경하여 향후 차이점에서 해결 될 것입니다.

문제 3)은 이제 shadowPath를 자동으로 생성하기 때문에 대부분 문제가 있습니다. 향후 그림자를보다 정밀하게 제어해야하는 경우 경로를 명시 적으로 설정하는 iOS 전용 소품을 제공 할 수 있습니다.

검토 자 : weicool

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

참고 URL : https://stackoverflow.com/questions/31336569/how-to-set-background-color-of-view-transparent-in-react-native