首页 文章

React Native DrawerLayout:子上的阴影出现在iOS上但不出现在Android上

提问于
浏览
0

我有一个使用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)

我是've found discussions describing this as having something to do with absolute positioning, but even if that'的情况,我不是 DrawerLayout 本身的一部分 . 有关如何在iOS和Android上实现相同阴影效果的任何想法?

1 回答

  • 1

    一些进一步的调查表明, DrawerLayout 将(可能)削减阴影 . 如果我将 elevation 道具放在 View 上(与 backgroundColor 一起),阴影就不再被剪裁了 .

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

相关问题