react native fast shadow下载 - react native fast shadow源代码下载

react native fast shadow

其他源码

v0.1.1

下载

？反应本地福斯特阴影

快速，高质量的Android阴影，用于React Native

为什么

React天然仅通过高程道具支持Android上的阴影，但是实现所需效果通常是不可能的，因为它只有很少的预设。已经创建了第三方库来规避这一点，但是当在许多视图上使用时，它们可以使您的应用程序较慢或显着增加其内存消耗。

特征

？‍♀️易于使用： <View>组件的置换式替换
⚡️绩效：阴影可以应用于大量视图，而没有任何明显的性能影响。它已被优化用于低内存消耗和快速渲染
？可自定义：支持所有常规的影子道具， shadowRadius ， shadowColor ， shadowOpacity和shadowOffset
通用：在所有平台上工作。在iOS和Web上， <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（）：

shadowStyle()实用程序也可以用来使创建阴影样式和保持阴影一致的浓度平台变得更加容易。它将创建与上述相同的style道具，但在iOS上将阴影半径除以2（由于某些原因，与设计工具或CSS的盒子遮阳相比，iOS阴影太大了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上，使用以下过程生成阴影可抽签（有关更多详细信息，请参见Shadowfactory.java）：

视图的形状（带有圆角的矩形）在画布上涂成黑色
使用RenderScript API将高斯模糊用于使用给定的shadowRadius的画布
然后将绘制可转换为九型绘制可抽奖，以确保在调整视图大小时不会扭曲阴影的角落。这样，我们只能生成一个可以绘制的小阴影，并以相同边界和模糊半径的所有视图重复使用它。
最后，可绘制的可绘制在视图内容后面：它是带有shadowColor / shadowOpacity ，并根据shadowOffset被取代

NinePatch -Drawable如何工作（注意调整可绘制时未将角的划分）：

故障排除

反应本地 - 福斯特阴影具有以下局限性：

它仅适用于圆形矩形：与iOS <View>实现不同， <ShadowedView>无法与自由图视图一起使用。它预计其直接的后代视图将是一个圆形的矩形（圆形）。解决方案：对于阴影<Text>元素，您可以使用TextShadowradius。对于复杂的形状，反应本地 - 安德罗是您的最佳选择。
<ShowshedView>期望其子女的视野能够填补它：由您确保<ShadowedView>及其孩子的大小相同，否则阴影将大于内容（您可以将其想到<ShadowedView>作为视图带有背景颜色）。
转角半径可能是错误地推断出来的：我们使用<ShadowedView>的样式或其直接孩子的样式来推断拐角半径以应用。如果您的视图层次结构更为复杂，则可能无法正确推断Corner Radii。解决方案：重新设计您的视图层次结构或将borderRadius直接传递到<ShadowedView>的style道具。
阴影半径限制为25或以下：此限制来自Renderscript的模糊效果。解决方案：让我们知道这是否是您的问题。在应用模糊效果之前，可以通过缩小阴影位图来解决这一问题。