Question

我正在尝试制作一个透明的叠加层容器，但是尽管我将overlayBackgroundColor设置为透明，但是在它上面仍然存在难看的阴影边框。

我尝试过：

<Overlay
  overlayStyle={{opacity: 1, shadowOpacity: 0}}
  overlayBackgroundColor={Colors.transparent}
  borderRadius={0}
>

Answer 1

我通过将以下道具添加到叠加层上来解决了这个问题。

fullScreen={true}

赞：

 <Overlay
    fullScreen={true}
    overlayBackgroundColor="transparent">
</Overlay>

希望对您有帮助。

Answer 2

如果将Overlay设置为全屏显示，则将丢失事件onBackdropPress，该事件可能被用来关闭Overlay。要删除阴影并仍然触发事件onBackdropPress，请通过overlayStyle禁用阴影效果。

<Overlay
    onBackdropPress={() => console.log('Backdrop pressed')}
    windowBackgroundColor='rgba(0, 0, 0, .5)'
    overlayBackgroundColor='transparent'
    width='auto'
    height='auto'
    overlayStyle={{ elevation: 0, shadowOpacity: 0 }}>
</Overlay>

Answer 3

似乎不再支持其他答案建议的某些属性，例如 windowBackgroundColor！

以下对我有用。

<Overlay
    overlayStyle={{ backgroundColor: "transparent", elevation: 0, shadowOpacity: 0 }}
>
...
</Overlay>

react-native-elements覆盖边框透明度

3 个答案: