【Android真机】FloatingPanel的层级问题，相同父容器下的其他组件即使zIndex比FloatingPanel高，仍然显示在FloatingPanel下层

24jieqi / react-native-xiaoshu

🌈 React Native UI library

https://24jieqi.github.io/react-native-xiaoshu

Apache License 2.0

188 stars 21 forks source link

Closed Joshua-p-x closed 2 months ago

Joshua-p-x commented 2 months ago

设备：小米6 版本：android 9 "react-native": "0.73.6", "@fruits-chain/react-native-xiaoshu": "^0.3.21",

条件：相同父容器都是absolute定位其他组件 zIndex设置为999 FloatingPanel zIndex设置为99

现象： FloatingPanel显示在其他组件上方

onlyling commented 2 months ago

从 floating-panel/index.tsx 可以得知，组件库导出的 FloatingPanel 添加在 Portal 下，渲染的时候会脱离当前父节点传送至最外层的 Provider。

如果想在当前父节点下渲染，可以使用 FloatingPanel.Component，这个组件可能受到父节点的影响，导致组件定位有误，样式查看。

Joshua-p-x commented 2 months ago

非常感谢您的回复。我使用 FloatingPanel.Component 解决了层级问题。