React Native DrawerLayout：孩子的阴影出现在iOS上但不在Android上答案

【问题标题】：React Native DrawerLayout: shadow on child appears on iOS but not on AndroidReact Native DrawerLayout：孩子的阴影出现在iOS上但不在Android上
【发布时间】：2018-05-05 00:59:32
【问题描述】：

我有一个应用程序，它使用 Expo 的 GestureHandler.DrawerLayout 和 "back" 抽屉样式，这样视图就位于固定抽屉的顶部并滑下以显示它。为了强调这种安排，我想为内容View 添加一个阴影，投射到抽屉内容上。到目前为止，我在 iOS 上工作，但在 Android 上没有。

为了与我的应用程序的其余部分隔离开来探索这一点，我分叉了react-native-gesture-handler 项目并修改了horizontalDrawer 示例应用程序。我在这里为阴影添加了样式道具：

https://github.com/kmagiera/react-native-gesture-handler/compare/2542bd39503412ef00883e0e799caf7d1f68ef3a...brettdh:shadows-broken-on-android

正如您在this screenshot 中看到的那样，阴影出现在 iOS 上，但不会出现在 Android 上。但是，如果我通过注释掉 this line 来删除绝对定位，我会看到阴影实际上被剪裁在左侧，正如您在 this screenshot 中看到的那样。

我已经深入研究了组件树并尝试了：

将阴影道具移动到包装器View
清除overflow: hidden
- （尽管现在我的理解是overflow: visible 仅适用于 iOS）

我发现讨论将此描述为与绝对定位有关，但即使是这样，我也不认为我可以避免这种情况，因为它是 DrawerLayout 本身的一部分。关于如何在 iOS 和 Android 上实现相同的阴影效果有什么想法吗？

【问题讨论】：

标签： android react-native react-native-android

【解决方案1】：

一些进一步的调查表明DrawerLayout 放置了a View around my component，这（可能）正在剪裁阴影。如果我将 elevation 道具放在 View 上（连同 backgroundColor），阴影将不再被剪裁。

这可能意味着我需要进行 PR 以在此包装器上启用自定义样式 View。

【讨论】：

上述拉取请求：github.com/kmagiera/react-native-gesture-handler/pull/163