react-native-shadow-fy

Attention：

对 react-native-svg 库根据自身的需求增加了属性，其他和原仓库没区别

New Param	Describe	Default
endColor	end color	#fff
useSvgOpacity	Whether to enable svg container transparency	false
svgOpacity	svg container transparency	0.57
useNative	Whether to use the ios shadow attribute in the ios environment, and svg in Android	false

为什么有这个仓库

https://github.com/879479119/react-native-shadow 这个仓库不再更新了，无法满足我的需求
https://github.com/SrBrahma/react-native-shadow-2 本想使用这个仓库，但这个仓库对于低版本的 react-native-svg 并不友好，至少我的 react-native-svg@5.5.1 版本无法使用这个库 PS:这个仓库实现的没有问题只是我的 svg 版本太低，无法使用，所以如果版本无问题的话，可以去使用这个。但我个人认为使用 react-native-shadow 会有一个更强兼容性的好处。所以看个人的选择。
react-native-svg 本身实现的就已经可以了，只是没有人维护导致无法满足需求，所以我根据我的需求增加了一些属性和代码

这个仓库和 react-native-svg 的区别

在原仓库的BoxShadow组件使用过程中我发现，渐变的开始颜色和结束颜色都使用的是 color 属性，但这样在真机上阴影的外边界中是无法融入背景的，导致的结果是仿佛没有扩散开。

所以我学习了 react-native-svg-2 里多了一个结束颜色的设定，增加了结束颜色的属性

同时在与原生 ios 效果的对比中认为整体的 svg 亮度偏亮，所以在整体的 svg 容器上增加了 useSvgOpacity和svgOpacity属性，启用useSvgOpacity后会默认在 svg 上加上svgOpacity = 0.57的透明度，视觉效果会更贴近原生。但我没有理论依据在证明这点，所以作为了一个开启参数提供使用。详情看下面的示例。

这是 expo 使用示例

如何使用

react-native-shadow 具体使用就是在此仓库上增加了一些属性。

npm i react-native-shadow-fy
// or
yarn add react-native-shadow-fy

import { BoxShadow } from "react-native-shadow-fy";
<BoxShadow
  // useNative={true}
  useSvgOpacity={true}
  setting={{
    width: 335,
    height: 70,
    color: "#FFFFFF",
    endColor: "#EEF0F4",
    border: 9,
    radius: 10,
    opacity: 0.8,
    x: -2,
    y: -2,
  }}
>
  <View style={{ width: 335, height: 70 }} />
</BoxShadow>;

思考

react-native-shadow的实现把一个容器分成 4 个方位，四条边使用的是 linear 渐变，四个角使用使用 radial 渐变来共同模拟了一个阴影半径扩散的效果。但这样存在的一个问题是最外面的那块的颜色是存在边界的，而原生的使用的是偏椭圆形的扩散，从实现的角度似乎就决定了无法做的和原生一模一样，除非去理解原生的实现，完整的去模拟过程。目前只能说尽量让视觉效果相似。

写在最后

第一次进行 npm 包的上传和参与开源社区，所以不清楚配置或者什么流程是否正规。以上