反应原生 - 下拉列表中的 z-index 不起作用 [英] React native - z-index in dropdown doesnt work

问题描述

我正在尝试在 React Native 中创建一个基本的下拉列表.

I am trying to create a basic dropdown in React Native.

我创建了一个下拉组件:

I have created a dropdown component:

//Dropdown
import React, { useState } from "react";
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Platform,
} from "react-native";
import { Feather } from "@expo/vector-icons";
import Responsive from "../responsive";
export default function DropDown({ options }) {
  const [isOpen, setIsOpen] = useState(false);

  const toggleDropdown = () => {
    setIsOpen((prev) => !prev);
  };

  return (
    <TouchableOpacity onPress={toggleDropdown} style={styles.dropdownBox}>
      <Text style={styles.selectedText}>Round</Text>
      <Feather name="chevron-down" size={24} />
      {isOpen && (
        <View style={styles.menu}>
          {options.map((item) => (
            <Text style={styles.option} key={item}>
              {item}
            </Text>
          ))}
        </View>
      )}
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  dropdownBox: {
    backgroundColor: "#FDCD3C",
    width: Responsive.width(364),
    alignSelf: "center",
    flexDirection: "row",
    height: Responsive.height(50),
    alignItems: "center",
    justifyContent: "space-between",
    paddingHorizontal: Responsive.width(15),
    // position: "absolute",
    borderRadius: 6,
    elevation: Platform.OS === "android" ? 50 : 0,
    marginVertical: Responsive.height(10),
    zIndex: 0,
  },
  selectedText: {
    fontFamily: "airbnb-bold",
    // color: "#fff",
    fontSize: Responsive.font(15),
  },
  menu: {
    position: "absolute",
    backgroundColor: "#fff",
    width: Responsive.width(364),
    paddingHorizontal: Responsive.width(15),
    paddingVertical: Responsive.height(10),
    // height: Responsive.height(20),
    // bottom: 0,
    top: Responsive.height(55),
    zIndex: 2,
    elevation: 2,
  },
  option: {
    height: Responsive.height(20),
  },
});

DropDown.defaultProps = {
  options: [],
  additionalStyles: {},
};

但是我的 zIndex 有问题

but I have a problem with the zIndex

第一个下拉菜单隐藏在第二个下拉菜单下

the first dropdown is hiding under the second dropdown

我尝试在两个地方都使用 z-index，但没有成功

I tried to play with the z-index in both places but it has not worked

有人知道我如何解决这个问题吗?

Does anyone have an idea how I can solve this issue?

//Dropdowns container
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import GradientBackground from "../../../shared/GradientBackground";
import ListTable from "../components/ListTable";
import DropDown from "../../../shared/DropDown";
import Responsive from "../../../responsive";
export default function PriceList() {
  return (
    <GradientBackground>
      <View>
        <DropDown
          options={[
            "BR",
            "PS",
            "OV",
            "PR",
            "RAD",
            "AC",
            "EM",
            "MQ",
            "BAG",
            "HS",
            "CU",
            "TRI",
          ]}
        />
        <DropDown options={["1.50 - 1.99 carat"]} />
        {/* <ListTable /> */}
      </View>
    </GradientBackground>
  );
}

const styles = StyleSheet.create({});

推荐答案

我认为 zIndex 只适用于兄弟姐妹...所以嵌套菜单不会弹出超过其父母的兄弟姐妹使用它.您可以在 DropDown 元素上应用降序 zIndex，这样每个元素都可以覆盖其下方的字段.

I think zIndex only applies to siblings... so the nested menu won't pop "out" over its parent's siblings using it. You could probably apply descending zIndex's on the DropDown elements, so that each element can overlay the fields below it.

<DropDown style={{zIndex: 10}} />
<DropDown style={{zIndex: 9}} />

此外，如果您向自定义组件添加 style 属性，则需要使用它才能生效:

Also, if you add a style prop to your custom component, you'll need to use it for it to take effect:

所以代替:

export default function DropDown({ options }) {
...
<TouchableOpacity onPress={toggleDropdown} style={styles.dropdownBox}>

你会:

export default function DropDown({ options, style }) {
...
<TouchableOpacity onPress={toggleDropdown} style={[styles.dropdownBox, style]}>

这篇关于反应原生 - 下拉列表中的 z-index 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！