React native - z-index в раскрывающемся списке не работает

Question

Я пытаюсь создать базовый c раскрывающийся список в 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-индексом в обоих местах, но это не сработало

Кто-нибудь знает, как я могу решить эту проблему?

введите описание изображения здесь

//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 применимо только к братьям и сестрам ... поэтому вложенное меню не будет «выскакивать» из-за его родных братьев и сестер, использующих его. Вероятно, вы могли бы применить нисходящие zIndex к элементам DropDown, чтобы каждый элемент мог перекрывать поля под ним.

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

Кроме того, если вы добавите опору style в свой собственный компонент, вам нужно будет использовать его, чтобы он вступил в силу:

Таким образом, вместо:

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

у вас будет:

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