首页 > 解决方案 > React Native DrawerLayout:孩子的阴影出现在iOS上但不在Android上

问题描述

我有一个应用程序使用 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

正如您在此屏幕截图中看到的那样,阴影出现在 iOS 上,但不在 Android 上。但是,如果我通过注释掉这一行来删除绝对定位,我会看到阴影实际上被剪裁在左侧,正如您在此屏幕截图中看到的那样。

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

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

标签: androidreact-nativereact-native-android

解决方案


一些进一步的调查表明,在我的组件周围DrawerLayout放置一个View(可能)剪裁阴影。如果我把我的elevation道具放在上面View(连同 a backgroundColor),阴影不再被剪裁。

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


推荐阅读