react native fast shadow Download react native fast shadow 소스 코드 다운로드

react native fast shadow

기타 소스코드

v0.1.1

다운로드

? 반응-신용-빠른 쉐이드

React Native를위한 빠르고 고품질 안드로이드 그림자

왜

React Native는 고도 소품을 통해 안드로이드의 그림자 만 지원하지만 사전 설정이 거의 없기 때문에 원하는 효과를 달성하는 것이 불가능합니다. 타사 라이브러리는 이것을 우회하기 위해 만들어졌지만 많은 관점에서 사용될 때 앱을 느리게 만들거나 메모리 소비를 크게 증가시킬 수 있습니다.

특징

? :️ 사용하기 쉬운 : <View> 구성 요소의 드롭 인 교체
⚡️ 성능 : 그림자는 중요한 성능 영향없이 많은 수의보기에 적용 할 수 있습니다. 메모리 소비가 낮고 빠른 렌더링에 최적화되었습니다.
? 사용자 정의 가능 : 모든 일반 섀도우 소품, shadowRadius , shadowColor , shadowOpacity 및 shadowOffset 지원합니다.
유니버설 : 모든 플랫폼에서 작동합니다. iOS와 웹에서 <ShadowedView> 는 <View> 의 별칭 일뿐입니다.

시작하기

npm install react-native-fast-shadow
# or
yarn add react-native-fast-shadow

용법:

 import { ShadowedView } from 'react-native-fast-shadow' ;

< ShadowedView
  style = { {
    shadowOpacity : 0.4 ,
    shadowRadius : 12 ,
    shadowOffset : {
      width : 5 ,
      height : 3 ,
    } ,
  } }
>
  < Image source = { require ( './kitten.png' ) } style = { { borderRadius : 30 } } / >
< / ShadowedView >

섀도우 스타일 () :

shadowStyle() 유틸리티는 그림자 스타일을 쉽게 만들고 그림자를 일관된 accross 플랫폼으로 유지하는 데 사용될 수 있습니다. 위와 동일한 style 소품을 생성하지만 iOS에서 그림자 반경을 2로 나눕니다 (일부 이유로 iOS 그림자는 디자인 도구 나 CSS의 박스 쇼도와 비교할 때 2의 계수로 너무 큽니다).

 import { ShadowedView , shadowStyle } from 'react-native-fast-shadow' ;

< ShadowedView
  style = { shadowStyle ( {
    opacity : 0.4 ,
    radius : 12 ,
    offset : [ 5 , 3 ] ,
  } ) }
>
  < Image source = { require ( './kitten.png' ) } style = { { borderRadius : 30 } } / >
< / ShadowedView >

후드 아래에서 어떻게 작동하는지

Android에서 Shadow Drawables는 다음 과정으로 생성됩니다 (자세한 내용은 Shadowfactory.java 참조) :

보기의 모양 (둥근 모서리가있는 사각형)은 캔버스에 검은 색으로 칠해져 있습니다.
렌더 스크립트 API를 사용하여 주어진 shadowRadius 와 함께 가우스 블러가 캔버스에 적용됩니다.
그런 다음, 드로우 가능은 9 개의 푸치 쿼터로 변환되어 뷰가 크기가 커지면 그림자의 모서리가 왜곡되지 않도록합니다. 이런 식으로, 우리는 작은 그림자 그림을 생성하고 동일한 테두리와 블러 방전을 가진 모든 뷰에 대해 재사용 할 수 있습니다.
마지막으로, 드로우 가능은보기 내용 뒤에 렌더링됩니다. shadowColor / shadowOpacity 와 함께 착색되고 shadowOffset 에 따라 오프셋됩니다.

NinePatchDrawable의 작동 원리

문제 해결

React-Native-Fast-Shadow는 다음과 같은 한계가 있습니다.

둥근 직사각형과 만 작동합니다. iOS <View> 구현과 달리 <ShadowedView> FreeForm 뷰에서 작동하지 않습니다. 직접 후손보기는 둥근 사각형 (원일)이 될 것으로 기대합니다. 솔루션 : Shadowed <Text> 요소의 경우 Textshadowradius를 사용할 수 있습니다. 복잡한 모양의 경우 Realt-Native-Androw가 최선의 선택입니다.
<shadowedview> 자식이 채우기를 기대합니다. <ShadowedView> 와 그 어린이가 같은 크기를 가지고 있는지 확인하는 것은 당신에게 달려 있습니다. 그렇지 않으면 그림자가 내용보다 커질 것입니다 ( <ShadowedView> 보기로 생각할 수 있습니다. 배경색으로).
코너 반경은 잘못 추론 될 수 있습니다. 우리는 <ShadowedView> 의 스타일 또는 직접 아이의 스타일을 사용하여 코너 반경을 적용 할 수 있습니다. View Hierarchy가 더 복잡한 경우 코너 반경이 올바르게 추론되지 않을 수 있습니다. 솔루션 : View Hierarchy를 재 작업하거나 borderRadius <ShadowedView> 의 style 소품으로 직접 전달하십시오.
그림자 반경은 25 이하로 제한됩니다. 이 제한은 렌더 스크립트의 흐림 효과에서 비롯됩니다. 솔루션 : 이것이 문제인지 알려주십시오. 이것은 흐림 효과를 적용하기 전에 그림자 비트 맵을 다운 스케일링하여 해결할 수 있습니다.

기준

다음 표는 12pt 반경 그림자가있는 픽셀 2에서 100 150x200pt <Image> 렌더링 할 때 react-native-fast-shadow , React Native-Androw 및 React-Native-Shadow-2의 메모리 소비를 비교합니다. 이 앱은 디버그 변형 및 헤르메스를 사용하여 구축되었습니다.