javascript - React native - 下拉列表中的 z-index 不起作用

Question

我正在尝试在 React Native 中创建一个基本的下拉菜单。
我创建了一个下拉组件:

//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 有疑问
第一个下拉菜单隐藏在第二个下拉菜单下
我尝试在两个地方都使用 z-index，但没有奏效
有谁知道我该如何解决这个问题？

//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({});

Answer 1

我认为 zIndex仅适用于 sibling ...因此嵌套菜单不会在使用它的父 sibling 上“弹出”。您可能可以应用降序 zIndex位于 DropDown元素，以便每个元素都可以覆盖它下面的字段。

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

此外，如果您添加 style prop 到您的自定义组件，您需要使用它才能使其生效:
所以而不是:

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

你会有:

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