反应原生Android Clipping子级 [英] React Native Android Clipping Children
问题描述
我正在使用expo创建一个react native应用程序，并且在标题中创建了一个下拉列表.在iOS上，下拉菜单可以根据需要进行工作，并且位于主要内容上方，而在Android上，其内容会被裁剪或位于下方.我不确定现实中的iOS是不是很奇怪，还是Android.
I am creating a react native app using expo, and I am creating a dropdown in the header. On iOS the dropdown works as desired, and goes 'above' the main content, while on Android it is clipped or goes 'under'. I am not sure if in reality iOS is acting strange, or Android is.
标头是一个自定义headerTitle组件，它包含自定义下拉菜单组件(一个视图，其中包含下拉菜单项(带有文本和图标的视图)
The header is a custom headerTitle component, which holds the custom dropdown component (a view, which holds the dropdown items (Views with text and icons)
我正在寻找解决这个问题的方法，并且尝试了zIndex和绝对定位(我读过的内容甚至无法在android上运行，但我想我会尝试)，但并没有解决(并导致了其他问题) ).
I am looking to get around this issue, and I have tried zIndex and absolute positioning (which I have read does not even work on android, but thought I would try), and that did not fix it (and caused other issues).
对于在iOS和Android上发生这种情况的任何提示，技巧和更好的理解，将不胜感激.如有必要，我也可以发布代码.
Any tips, tricks, and better understanding of why this happens on iOS and Android would be greatly appreciated. I can post code if necessary as well.
推荐答案
React Native在Android上不支持overflow: 'visible'.
React Native does not support overflow: 'visible' on Android.
A good example to look at for this is here: https://github.com/brentvatne/growler-prowler/blob/0eebfaae641a088b1a1fd7ffe552deeac914bffe/screens/BreweryListScreen.js#L70-L76
这里的关键是将菜单组件呈现在模式内部(在这种情况下，我使用react-native-root-modal)，以便使其出现在标题的顶部.
The key here is to render the menu component inside of a modal (in this case I'm using react-native-root-modal) in order to have it appear on top of the header.
这篇关于反应原生Android Clipping子级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
