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

Question

伙计们。

所以，我正在尝试使用 React Native 制作一个简单的 Select 下拉菜单。我还有另一个代码也能正常工作，但问题出在 Position absolute 中。我试了很多次都没有成功。

问题：

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

预期行为：

所有组件上方的绝对视图

有人可以帮助我吗？

这是我对这个问题的简述。

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

谢谢大家

Answer 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>

Answer 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}}。我认为没有任何必要。

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

React Native - Positioned absolute view is behind other components of the screen

android

absolute

reactjs

react-native