react native shadow 2
v7.1.1
중요한
2024 년 10 월 23 일 에 출시 된 새로운 React Native 0.76은 마지막으로 크로스 플랫폼 그림자를 지원합니다!
이 새로운 기능은이 라이브러리보다 선호되어야합니다.
지난 4 년 동안 모든 사람의 지원과 친절을 진심으로 감사하고 매주 39k 및 2m의 총 다운로드에 도달 한 것을 축하 할 수 있습니까 ?
Typescript, React 및 React Native에서 5 년간의 전문 지식을 가진 열정적 인 전문가를 찾고 있다면 [email protected]으로 저에게 연락하십시오!
반응 신용 쉐이드는 몇 년 동안 죽었습니다. 이것은 더 많은 기능, 타입 스크립트 지원 및 처음부터 작성된 개선 된 버전입니다. 크기를 정의 할 필요는 없습니다. 그림자는 첫 번째 렌더에 현명하게 적용되며 다음과 정확히 다시 나타납니다.
Android, iOS 및 웹에 대해 동일한 그림자 모양과 사용법을 갖지 않는 Old React 기본 문제를 해결합니다.
EtherCreative/React-Native-Shadow-Generator 웹 사이트는 여기에 설명한 이유로 두 플랫폼간에 유사한 결과를 제공하지 않습니다. 이 라이브러리만큼 사용자 정의 할 수 없습니다.
Android, iOS 및 웹과 호환됩니다. 그리고 엑스포!
RTL을 지원합니다.
이 라이브러리를 빠르게 시도하십시오!
엑스포 사용을 포함하여 최신
react-native-svg버전이 권장됩니다.
npm i react-native-shadow-2
# or
yarn add react-native-shadow-2 import { Shadow } from 'react-native-shadow-2' ;
< Shadow >
< Text style = { { margin : 20 , fontSize : 20 } } > ? </ Text >
</ Shadow > 
< Shadow distance = { 15 } startColor = { '#eb9066d8' } endColor = { '#ff00ff10' } offset = { [ 3 , 4 ] } >
< View style = { { borderTopStartRadius : 24 , borderBottomEndRadius : 0 , borderRadius : 10 , backgroundColor : '#c454f0dd' } } >
< Text style = { { margin : 20 , fontSize : 20 } } > ? </ Text >
</ View >
</ Shadow > 
| 재산 | 설명 | 유형 | 기본 |
|---|---|---|---|
| 스타트 콜러 | 그림자의 초기 그라디언트 색상. | string | '#00000020' |
| endcolor | 그림자의 최종 그라디언트 색상. | string | 투명한 스타트 컬러. 설명. |
| 거리 | 그림자가 얼마나 멀리 가는지. | number | 10 |
| 오프셋 | 그림자를 움직입니다. 음수 x 왼쪽/시작하고, y 위로 이동합니다.'x%' 값을 허용합니다.이것을 정의하면 평범한 원하는 행동이므로 기본 paintInside True 로 표시됩니다. | [x: string | number, y: string | number] | [0, 0] |
| Paintinside | 내용 아래/내부에 그림자를 적용하십시오. startColor 그라디언트없이 채우기 색상으로 사용됩니다.offset 사용하거나 자녀에게 투명성이있는 경우 유용합니다. | boolean | false 이지만 offset 정의되면 true |
| 측면 | 그림자가 그려진 측면. 모서리는 포함되지 않습니다. 정의되지 않은 측면이 진실로 떨어집니다. 설명. | Record<'start' | 'end' | 'top' | 'bottom', boolean> | undefined |
| 코너 | 그림자가 그려진 모서리. 정의되지 않은 코너가 진실로 떨어집니다. 설명. | Record<'topStart' | 'topEnd' | 'bottomStart' | 'bottomEnd', boolean> | undefined |
| 스타일 | 자녀를 감싸는 시야의 스타일. 아래 메모를 읽으십시오. | StyleProp<ViewStyle> | undefined |
| 컨테이너 타일 | 그림자와 자녀를 감싸는 시야의 스타일. 마진에 유용합니다. | StyleProp<ViewStyle> | undefined |
| 뻗기 | 자녀를 Ocuppy로 모든 수평 공간으로 만드십시오. 설명. | boolean | false |
| 증인 | 첫 번째 렌더링에는 상대 크기 및 포지셔닝을 사용하지 않지만 정확한 OnLayout 크기의 다음 렌더링. 첫 번째 렌더의 시각적 아티팩트를 피하기 위해 측면 크기 (원과 같은)보다 더 큰 반경을 다루는 경우 유용합니다.true 이라면, 첫 번째 렌더링에 그림자가 나타나지 않습니다. | boolean | false |
| 장애가 있는 | 그림자를 비활성화합니다. 때로는 그림자가 바람직하지 않기 때문에 쉽게 구성 요소를 재사용하는 데 유용합니다.containerStyle 과 style 여전히 적용됩니다. | boolean | false |
그림자에 아이가있는 경우, 정의 된 경우 어린이 style 속성에서 width , height 및 모든 borderRadius 속성을 얻게됩니다.
그림자 style 에서 이러한 속성을 정의 할 수도 있습니다. 여기서 정의 된 속성은 아동 style 로 정의 된 속성보다 우선 순위가 있습니다.
width 와 height 그 중 하나라도 정의되면 첫 번째 자동 크기가 발생하지 않으므로 정확한 렌더 만 발생하지 않으므로 단일 렌더 만 있습니다.
'borderTopLeftRadius' 또는 'borderTopStartRadius' 와 그 변형을 사용하여 코너 반경을 정의 할 수 있지만, 후자는 RTL 표준이므로 후자를 권장합니다.
크기가 정의되지 않으면 반경이 측면보다 크면 그림자가 엉망이됩니다. 정확한 구성 요소 크기가 있고 반지름이 제대로 제한 될 때, safeRender 속성을 사용하여 두 번째 렌더와 그 너머의 그림자 만 표시 할 수 있습니다 .
2000보다 큰 반지름 (Tailwind의 rounded-full 9999)은 안드로이드를 충돌시킬 수 있습니다.
불투명도는 Alpha 채널에서 startColor 및 endColor PROGITIES에서 직접 설정됩니다. 예 : '#0001' 은 거의 투명한 검은 색입니다. '#rrggbbaa' , 'rgba()' , 'hsla()' 등을 사용할 수도 있습니다.이 링크의 모든 패턴은 int 색상이 아닙니다.
Shadow 구성 요소에서 stretch 속성 또는 style={{alignSelf: 'stretch'}} 사용하십시오. 설명!
ShadowProps 유형 인 Shadow 구성 요소의 소품을 내 보냅니다. 다음을 수행 할 수 있습니다.
const ShadowPresets = {
button : {
offset : [ 0 , 1 ] , distance : 1 , startColor : '#0003' ,
} as ShadowProps ,
} ;
< Shadow { ... ShadowPresets . button } > offset 및 size 속성은 TypeScript 오류를 던지고 있습니다!타입 스크립트를 4.0.0 이상 업그레이드하십시오! 이 두 특성은 레이블이 붙은 튜플을 사용합니다. TypeScript를 사용하지 않으면 이런 일이 발생하지 않습니다.
