React Native - 定位的绝对视图位于屏幕的其他组件后面答案

【问题标题】：React Native - Positioned absolute view is behind other components of the screenReact Native - 定位的绝对视图位于屏幕的其他组件后面
【发布时间】：2021-12-18 03:40:56
【问题描述】：

伙计们。

所以，我正在尝试使用 React Native 制作一个简单的选择下拉菜单。我还有另一个代码也可以，但问题出在绝对位置。我尝试了很多次，但没有成功。

问题：

绝对视图在屏幕的其他组件之后。

预期行为：

所有组件之上的绝对视图

有人可以帮我吗？

这是我对这个问题的零食表示。

https://snack.expo.dev/@ellyssonmiike/shallow-croissant

谢谢大家

【问题讨论】：

标签： android reactjs react-native absolute

【解决方案1】：

您可以使用react-native-portalize 库来解决这个问题。 Portalize 基本上是在 Host 组件中渲染 Portal 的内容。

这里是 Portalize 实现的小菜一碟：https://snack.expo.dev/@truetiem/shallow-croissant

首先你需要安装react-native-portalize:

yarn add react-native-portalize

然后用 Host 组件包装你的应用：

import {Host} from 'react-native-portalize';

<Host>
  // your app content
</Host>

并使用 Portal 组件包装您的下拉列表：

import {Portal} from 'react-native-portalize';

<Portal>
  <View style={[styles.dropdownMenu, { top: height }]}>
    // your dropdown content
  </View>
</Portal>

【讨论】：

谢谢，完美运行！

【解决方案2】：

您只需对样式表进行一点重新安排，如下所示：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    zIndex: 10
  },
  dropdownContainer: {
    position: 'absolute',
    top: Constants.statusBarHeight,
    zIndex:10,
    backgroundColor: '#ccc',
    width: '100%',
    elevation: 10,
  },
  dropdownMenu: {
    flex:1
  }
});

您还可以删除 {{top: height}} 的 Item 样式。我觉得没有必要。

【讨论】：