为什么我的SVG在React Native中没有显示任何阴影？

Question

问题：

我有一个React Native项目，使用react-native-svg导入我的标志。我使用react-navigation创建了自定义的底部选项卡栏，它看起来像这样：

所以问题就在于，我在Adobe XD文件中制作了这个SVG时是这样的（只有紫色按钮）：

因此，您可以看到，明显有阴影，但在我的项目中没有阴影。我做错了什么？

我这样使用组件：

import Logo from "../assets/icons/add_icon.svg"

然后用<Logo />渲染它。

这是SVG（顺便说一下，当我在浏览器中打开它时会显示阴影）：https://pastebin.com/w9YZysgS

为什么我的应用程序中没有阴影？（直接应用阴影样式也无效）。

规格：

• Android
• Windows
• React-Native 0.62（最新版）

非常感谢您的帮助。

- GeraltDieSocke

---

尝试将您的SVG放入具有以下内容的“<View>”中： 与您的SVG相同的高度和宽度，圆形边框为2 * SVG高度，高程在7-10之间。 代码如下所示：<View style={{height: 10, width: 10, borderRadius: 20, elevation: 10}}> <Svg src=(您的SVG代码) /> </View> - William Brochensque junior

这个完美运作。这是我现在的设置方式：https://pastebin.com/6qdSNRXA 我在我的图标周围放了一个视图，并像你说的那样设置了属性，虽然它看起来不完全像设计中的那样，但仍然很棒，我可以通过高程值调整阴影。我能设置高程颜色吗？ - GeraltDieSocke

可能相关：React Native SVG中的SVG滤镜支持 - Mehdi

请认真阅读 @Mehdi，我认为从所有内容中得出的TL;DR就是使用这个：https://github.com/folofse/androw/tree/master/react-native-androw 我会试一下，谢谢。 - GeraltDieSocke

@GeraltDieSocke 我很确定你无法改变海拔的颜色，但你可以尝试使用react-native-shadow：https://github.com/879479119/react-native-shadow。 - William Brochensque junior

Answer 1

这并不是一个编码修复，但在你将阴影设计为阴影之前，你可以将其制作成与形状相同的径向渐变对象。

- Emeka Okafor