React native React本机项未使用FlatList正确分层

我正在尝试使用FlatList在React Native中将定制的下拉菜单堆叠在彼此的顶部。我希望第一个下拉列表与第二个重叠，而第二个下拉列表与第三个重叠。下图显示了相反的情况，其中第三个下拉列表与第二个重叠，而第二个下拉列表与第一个重叠

但是，如果我使用map方法，它似乎工作得很好

从“React”导入React；
从“react native”导入{View，StyleSheet，FlatList}；
从“./组件/下拉列表”导入下拉列表；
从“react native normalize”导入normalize；
导出默认值（）=>{
const arr=[0，65，130]；//控制下拉列表之间的边距//顶部
常量层=[3,2,1]；//Z-index
返回(
(
)}
/>
{/*{arr.map（（间距，索引）=>{
//带地图
返回(
);
})} */}
);
};
const styles=StyleSheet.create({
容器：{
弹性：1，
},
下拉列表：{
位置：“绝对”，
},
卡片容器：{
顶部：“41%”，
左：“37%”，
高度：标准化（134），
},
});

下拉代码

import React，{useState，useRef}来自“React”；
进口{
有生气的
缓和,，
看法
文本，
样式表，
可触摸且无反馈，
}从“反应本族语”；
从“react native normalize”导入normalize；
从“./assets/DownArrowIcon”导入下拉图标；
导出默认值（）=>{
const fadeAnim=useRef（新的动画.Value（0））.current；
const[toggle，setToggle]=useState（true）；//控制下拉动画
常量[AccessLevel，SetAccessLevel]=useState([
“经理”，
“观众”，
“管理员”，
]);
const height=normalize（33）；//下拉菜单的初始高度
常数fadeIn=（）=>{
//将fadeAnim值更改为.5英寸
动画。计时（fadeAnim{
toValue:0.5，
放松：放松.inOut（放松.exp），
时长：325，
}).start（）；
};
常数衰减=（）=>{
//将fadeAnim值更改为0
动画。计时（fadeAnim{
toValue:0，
放松：放松.inOut（放松.exp），
时长：250，
}).start（）；
};
常量handleAnimation=（）=>{
setToggle（（prev）=>！prev）；
切换？fadeIn（）：fadeOut（）；
};
const handleSwap=（项目）=>{
//将选定项与下拉菜单的第一项交换
让index=accessLevels.indexOf（项）；
SetAccessLevel（（prevData）=>{
让数据=[…prevData]；
设温度=数据[0]；
数据[0]=项目；
数据[索引]=温度；
返回数据；//我们可以按字母顺序排序！
});
};
返回(
{/*第一个下拉项*/}
{accessLevels[0]}
{
手部运动（）；
handleSwap（访问级别[1]）；
}}
>
{accessLevels[1]}
{
手部运动（）；
handleSwap（访问级别[2]）；
}}
>
{accessLevels[2]}
);
};
const styles=StyleSheet.create({
下拉列表：{
背景色：“4E585E”，
宽度：标准化（97），
边界半径：4，
溢出：“隐藏”，
},
下拉文本：{
颜色：“白色”，
},
下拉列表项：{
宽度：“100%”，
辩护内容：“中心”，
对齐项目：“中心”，
高度：正常化（24），
},
});请将
下拉列表添加到您的question@HagaiHarari好的，我刚刚添加了下拉代码
import React from "react";
import { View, StyleSheet, FlatList } from "react-native";
import Dropdown from "../components/Dropdown";
import normalize from "react-native-normalize";

export default () => {
  const arr = [0, 65, 130]; // controls the margin between the dropdowns // top
  const layers = [3, 2, 1]; // Z-index

  return (
    <View style={styles.container}>
      <FlatList // With FlatList
        data={arr}
        renderItem={({ item, index }) => (
          <View style={[styles.dropdown, { top: item, zIndex: layers[index] }]}>
            <Dropdown />
          </View>
        )}
      />
      {/* {arr.map((spacing, index) => {
        // With map
        return (
          <View
            style={[styles.dropdown, { top: spacing, zIndex: layers[index] }]}
          >
            <Dropdown />
          </View>
        );
      })} */}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  dropdown: {
    position: "absolute",
  },
  cardContainer: {
    top: "41%",
    left: "37%",
    height: normalize(134),
  },
});