我使用react-native-dropdown-picker為我的用戶提供一些選項。 目前，我在同一個屏幕上有兩個下拉菜單。問題是當我打開第一個下拉列表時，列表被第二個下拉容器覆蓋了。

我已經做了軟件包網站上列出的與元素定位相關的所有事情(使用它們的zIndex和zIndexInverse屬性),但我仍然在努力讓它工作。

以下是一些代碼:

CustomDropdownComponent:

import { useState } from 'react';
import { StyleSheet, View } from 'react-native';
import DropDownPicker from "react-native-dropdown-picker";
import { LightGray, PlaceholderGray } from '../../../assets/colors';

const styles = StyleSheet.create({
    placeholder: {
        fontSize: 15,
        color: PlaceholderGray
    },
    interFont: {
        fontFamily: "InterRegular"
    }
})

const Dropdown = ({ items, returnValue, placeholder, containerStyle, dropdownIndex, dropdownCount }) => {
    const [open, setOpen] = useState(false);
    const [value, setValue] = useState(false);

    const dropdownTheme = require("../../../assets/dropdownTheme");

    DropDownPicker.addTheme("DropdownTheme", dropdownTheme);
    DropDownPicker.setTheme("DropdownTheme");

    function selectValue(value) {
        setValue(value);
        returnValue(value);
    }

    console.log((dropdownCount - dropdownIndex) * 1000);
    console.log((dropdownIndex + 1) * 1000);
    return (
        <View style={containerStyle ?? {}}>
            <DropDownPicker
                zIndex={(dropdownCount - dropdownIndex) * 1000}
                zIndexInverse={(dropdownIndex + 1) * 1000}
                open={open}
                value={value}
                items={items}
                setOpen={setOpen}
                setValue={selectValue}
                placeholder={placeholder ?? "Selecione um item"}
                placeholderStyle={[styles.placeholder, styles.interFont]}
                listItemLabelStyle={styles.interFont}
                searchable={true}
            />
        </View>
    );
}

export default Dropdown;

我使用CustomDropdown組件的屏幕:

import { View, Text, StyleSheet } from 'react-native';
import { useState } from 'react';
import PageTitle from '../components/textual/PageTitle';
import Section from '../components/layout/Section';
import Dropdown from '../components/inputs/Dropdown';
import Screen from '../components/layout/Screen';
import { dropdownize } from '../contrib';
import CustomSwitch from '../components/inputs/CustomSwitch';

const EndpointLayout = ({ endpointOptions, setEndpoint, endpointType, switchEndpointType, index, count }) => {
    const [open, setOpen] = useState(false);

    return (
        <View style={styles.endpoint}>
            <Dropdown
                dropdownIndex={index}
                dropdownCount={count}
                open={open}
                setOpen={setOpen}
                containerStyle={styles.endpointDropdown}
                items={dropdownize(endpointOptions[endpointType])}
                returnValue={setEndpoint}
                placeholder={"Selecione um local"}
            />
            <View style={styles.endpointType}>
                <Text style={styles.endpointTypeText}>{endpointType === "campus" ? "Campus" : "Bairro"}</Text>
                <CustomSwitch
                    switchValue={endpointType === "campus"}
                    onSwitchHandler={switchEndpointType}
                />
            </View>
        </View>
    );
}

const RegisterRouteScreen = ({ navigation }) => {
    const teste = {
        "campus": ["Campus1", "Campus2", "Campus3", "Campus4", "Campus5", "Campus6", "Campus7", "Campus8"],
        "neighborhood": ["Bairro1", "Bairro2", "Bairro3", "Bairro4", "Bairro5", "Bairro6", "Bairro7", "Bairro8"]
    };
    const [origin, setOrigin] = useState("");
    const [originType, setOriginType] = useState("campus");
    const [destiny, setDestiny] = useState("");
    const [destinyType, setDestinyType] = useState("campus");

    function getEndpointType(currentType) {
        return currentType === "campus" ? "neighborhood" : "campus";
    }

    return (
        <Screen>
            <PageTitle title={"Cadastrar Rota"} />
                <EndpointLayout
                    index={0}
                    count={2}
                    endpointOptions={teste}
                    setEndpoint={setOrigin}
                    endpointType={originType}
                    switchEndpointType={() => { setOriginType(getEndpointType(originType)) }}
                />
                <EndpointLayout
                    index={1}
                    count={2}
                    endpointOptions={teste}
                    setEndpoint={setDestiny}
                    endpointType={destinyType}
                    switchEndpointType={() => { setDestinyType(getEndpointType(destinyType)) }}
                />
        </Screen>
    );
}

const styles = StyleSheet.create({
    endpoint: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center"
    },
    endpointTypeSwitch: {
        marginLeft: 10
    },
    endpointDropdown: {
        width: "60%"
    },
    endpointType: {
        flexDirection: "row",
        alignItems: "center",
        alignSelf: "center"
    },
    endpointTypeText: {
        fontFamily: "InterRegular",
        marginRight: 5
    }
})

export default RegisterRouteScreen;

我的下拉自定義主題(我復制了燈光主題，只是改變了一些顏色，并刪除了一些邊框):

import {
    Platform,
    StyleSheet
} from 'react-native';

import { LightGray, Black, White } from './colors';

export const ICONS = {
    ARROW_DOWN: require("../node_modules/react-native-dropdown-picker/src/themes/light/icons/arrow-down.png"),
    ARROW_UP: require('../node_modules/react-native-dropdown-picker/src/themes/light/icons/arrow-up.png'),
    TICK: require('../node_modules/react-native-dropdown-picker/src/themes/light/icons/tick.png'),
    CLOSE: require('../node_modules/react-native-dropdown-picker/src/themes/light/icons/close.png')
};

export default StyleSheet.create({
    container: {
        width: '100%',
    },
    style: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        width: '100%',
        minHeight: 50,
        borderRadius: 8,
        paddingHorizontal: 10,
        paddingVertical: 3,
        backgroundColor: LightGray
    },
    label: {
        flex: 1,
        color: Black
    },
    labelContainer: {
        flex: 1,
        flexDirection: 'row',
    },
    arrowIcon: {
        width: 20,
        height: 20
    },
    tickIcon: {
        width: 20,
        height: 20
    },
    closeIcon: {
        width: 30,
        height: 30
    },
    badgeStyle: {
        flexDirection: 'row',
        alignItems: 'center',
        borderRadius: 10,
        backgroundColor: LightGray,
        paddingHorizontal: 10,
        paddingVertical: 5
    },
    badgeDotStyle: {
        width: 10,
        height: 10,
        borderRadius: 10 / 2,
        marginRight: 8,
        backgroundColor: LightGray
    },
    badgeSeparator: {
        width: 5,
    },
    listBody: {
        height: '100%',
    },
    listBodyContainer: {
        flexGrow: 1,
        alignItems: 'center',
    },
    dropDownContainer: {
        position: 'absolute',
        backgroundColor: LightGray,
        borderRadius: 8,
        width: '100%',
        overflow: 'hidden',
        backgroundColor: "red",
        zIndex: 1000
    },
    modalContentContainer: {
        flexGrow: 1,
    },
    listItemContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingHorizontal: 10,
        height: 40
    },
    listItemLabel: {
        flex: 1,
        color: Black
    },
    iconContainer: {
        marginRight: 10
    },
    arrowIconContainer: {
        marginLeft: 10
    },
    tickIconContainer: {
        marginLeft: 10
    },
    closeIconContainer: {
        marginLeft: 10
    },
    listParentLabel: {

    },
    listChildLabel: {

    },
    listParentContainer: {

    },
    listChildContainer: {
        paddingLeft: 40,
    },
    searchContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        padding: 10,
        borderColor: Black,
    },
    searchTextInput: {
        flexGrow: 1,
        flexShrink: 1,
        margin: 0,
        paddingHorizontal: 10,
        paddingVertical: 5,
        borderRadius: 8,
        color: Black
    },
    itemSeparator: {
        height: 1,
        backgroundColor: Black,
    },
    flatListContentContainer: {
        flexGrow: 1
    },
    customItemContainer: {

    },
    customItemLabel: {
        fontStyle: 'italic',
        fontFamily: "InterRegular"
    },
    listMessageContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        padding: 10,
    },
    listMessageText: {

    },
    selectedItemContainer: {

    },
    selectedItemLabel: {

    },
    modalTitle: {
        fontFamily: "InterBold",
        fontSize: 18,
        color: Black
    },
    extendableBadgeContainer: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        flex: 1
    },
    extendableBadgeItemContainer: {
        marginVertical: 3,
        marginEnd: 7
    }
});