Javascript react本机下拉选择器，如何修复其他组件上的下拉选择器覆盖

我使用react native下拉列表选择器根据按钮单击显示多个下拉列表。下拉列表显示为覆盖在另一个组件上，我无法选择项目。有人能帮忙解决这个问题吗

示例代码：

import * as React from 'react';
import {View, Text, ScrollView, StyleSheet} from 'react-native';
import DropDownPicker from 'react-native-dropdown-picker';
import {Button, Card} from 'react-native-paper';
//import Constants from 'expo-constants';

// You can import from local files
//import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
//import { Card } from 'react-native-paper';

export default function App() {
  const [myArray, setMyArray] = React.useState([]);
  const [open, setOpen] = React.useState(false);
  const [value, setValue] = React.useState(null);
  const [items, setItems] = React.useState([
    {label: 'Apple', value: 'apple'},
    {label: 'Banana', value: 'banana'},
    {label: 'Orange', value: 'orange'},
    {label: 'Lemon', value: 'lemon'},
  ]);

  const test = () => {
    console.log('Function called');
    setMyArray([{name: 'hello'}]);
  };

  return (
    <View style={styles.container}>
      <Button mode="contained">
        Button 1
      </Button>
      <Text>Hello world</Text>

      <Button mode="contained" >
        Button 2
      </Button>

      <Text>Hello world</Text>

      <Button mode="contained" >
        Button 3
      </Button>
      <Text>Hello world</Text>

      <Button mode="contained" onPress={() => test()} >
        ADD DropDown
      </Button>
      

      {myArray.map((item, index) => {
        
        return (
          <Card key={index} style={{height: 40}}>
            <DropDownPicker
              dropDownDirection="TOP"
              open={open}
              value={value}
              items={items}
              setOpen={setOpen}
              setValue={setValue}
              setItems={setItems}
              zIndex={3000}
              zIndexInverse={1000}
              containerStyle={{position: 'relative', width: '70%', left: '15%', paddingTop: 10}}
              childrenContainerStyle={{
                height: 1030,
              }}
              style={{
                backgroundColor: '#fafafa',
                zIndex: 10,
                position: 'relative',
              }}
              itemStyle={{justifyContent: 'flex-start'}}
              dropDownStyle={{backgroundColor: '#fafafa', height: 100}}
              dropDownContainerStyle={{
                backgroundColor: 'white',
                zIndex: 1000,
                elevation: 5000,
              }}
            />
          </Card>
        );
      })}

      <Button mode="contained">
        Button 4
      </Button>
      <Text>Hello world</Text>

      <Button mode="contained" >
        Button 5
      </Button>

      <Text>Hello world</Text>

      <Button mode="contained" >
        Button 6
      </Button>
      <Text>Hello world</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    textAlign: 'center',
  },
});

import*as React from'React'；
从“react native”导入{View，Text，ScrollView，StyleSheet}；
从“反应本机下拉选择器”导入下拉选择器；
从“react native paper”导入{按钮，卡片}；
//从“expo常量”导入常量；
//可以从本地文件导入
//从“./components/AssetExample”导入AssetExample；
//或npm中可用的任何纯javascript模块
//从“react native paper”导入{Card}；
导出默认函数App（）{
const[myArray，setMyArray]=React.useState（[]）；
const[open，setOpen]=React.useState（false）；
const[value，setValue]=React.useState（null）；
const[items，setItems]=React.useState([
{标签：'Apple'，值：'Apple'}，
{标签：'Banana'，值：'Banana'}，
{标签：'Orange'，值：'Orange'}，
{标签：'Lemon'，值：'Lemon'}，
]);
常数测试=（）=>{
log（'Function called'）；
setMyArray（[{name:'hello'}]）；
};
返回(
按钮1
你好，世界
按钮2
你好，世界
按钮3
你好，世界
test（）}>
添加下拉列表
{myArray.map（（项，索引）=>{
返回(
);
})}
按钮4
你好，世界
按钮5
你好，世界
按钮6
你好，世界
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
对齐项目：“居中”，
为内容辩护：“中心”，
textAlign:'中心'，
},
});

---

预期：希望显示不带覆盖的下拉列表，并且项目应该是可选的。

您可以将按钮的另一个

zIndex

设置为0。

在大量工作找到解决此问题的方法后。只需在样式中添加z_索引：-5。