react native shadow 2
v7.1.1
重要的
2024年10月23日发布的新React Native 0.76最终支持了跨平台的阴影！
此新功能应比此库更优选。
在过去的近4年中，我只能全心全意地欣赏每个人的支持和友善，并庆祝每周达到39k，总下载量为2m ？
如果您正在寻找具有5年专业知识，反应和反应的热情专业人士，请通过[email protected]与我联系！
反应原状阴影已经死了多年。这是一个改进的版本，具有更多功能，打字稿支持和从头开始写的。不需要定义其尺寸：阴影巧妙地应用于第一个渲染，然后精确地重新涂在以下渲染上。
它解决了Android，iOS和Web没有相同的阴影外观和用法的旧反应本机问题。
出于我在此处描述的原因，涡轮创建/反应形式隐形生成网站不会为您提供两个平台之间的非常相似的结果。它也不像这个库那样可定制。
与Android，iOS和Web兼容。和博览会！
支持RTL。
快速尝试一下这个图书馆！
建议使用最新的
react-native-svg版本，包括使用Expo。
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 > 
| 财产 | 描述 | 类型 | 默认 |
|---|---|---|---|
| StartColor | 阴影的最初梯度颜色。 | string | '#00000020' |
| 端彩 | 阴影的最终梯度颜色。 | string | 透明的启动颜色。解释。 |
| 距离 | 阴影走了多远。 | number | 10 |
| 抵消 | 移动阴影。负x向左/启动移动，负y将其移动。接受 'x%'值。将其定义为true 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 |
| 拉紧 | 使您的孩子伴有所有可用的水平空间。解释。 | boolean | false |
| 更安全 | 不会在第一渲染上使用相对的尺寸和定位，而是在以下渲染器上使用确切的on layout尺寸。如果处理大于侧面尺寸（如圆）以避免在第一渲染上的视觉伪像的侧面大小（例如圆），则有用。 如果 true ，则阴影将不会出现在第一渲染上。 | boolean | false |
| 禁用 | 禁用阴影。由于有时不需要阴影，可用于易于重复使用组件。 仍然应用 containerStyle和style 。 | boolean | false |
如果阴影有一个孩子，它将获得儿童style属性（如果定义）的width ， height和所有borderRadius属性。
您还可以在影子的style中定义这些属性。这里定义的属性将优先于孩子的style中定义的属性。
如果在其中任何一个中定义了width和height ，则只会有一个渲染，因为第一个自动尺寸不会发生，只有精确的渲染。
您可以使用'borderTopLeftRadius'或'borderTopStartRadius'及其变化来定义角落半径，尽管我建议后者是RTL标准。
如果没有定义大小，则半径大于其侧面将弄乱阴影。当我们具有确切的组件大小并且半径受到适当限制时，您可以使用safeRender属性仅在第二渲染及以后显示阴影。
大于2000年的半径（Tailwind的rounded-full是9999）可能会崩溃的Android。
不透明度直接在Alpha通道中的startColor和endColor属性中设置。例如： '#0001'是几乎透明的黑色。您也可以使用'#rrggbbaa' ， 'rgba()' ， 'hsla()'等。此链接中的所有模式（但不是int颜色）都被接受。
使用stretch属性或style={{alignSelf: 'stretch'}}在您的影子组件中。解释！
它导出了ShadowProps类型，即阴影组件的道具。您可能会执行以下操作：
const ShadowPresets = {
button : {
offset : [ 0 , 1 ] , distance : 1 , startColor : '#0003' ,
} as ShadowProps ,
} ;
< Shadow { ... ShadowPresets . button } > offset和size属性正在抛出打字稿错误！将您的打字稿升级到至少4.0.0！这两个属性使用标记的元组。如果您不使用打字稿，则不会发生这种情况。
