如何解决react-native-dropdown-picker下拉框覆盖其他组件无法选择的问题

问题核心原因 #

• 所有动态生成的下拉选择器共用全局的open/value状态，状态冲突导致选中、打开操作异常
• 父容器Card未设置zIndex，子组件设置的zIndex无法生效，下拉列表被后续层级更高的组件覆盖
• 冗余高度限制：Card固定40px高度、childrenContainerStyle设置1030px无效高度，挤压下拉列表渲染空间
• 强制设置dropDownDirection="TOP"，当下拉选择器上方空间不足时，弹出列表会被上方组件遮挡

修复步骤 #

1. 重构状态管理，为每个下拉分配独立状态 #

删除全局共用的open、value状态，修改数组存储结构，每个动态生成的下拉项单独存储自身状态：

// 修改state定义
const [myArray, setMyArray] = React.useState([]);
const [items, setItems] = React.useState([
  {label: 'Apple', value: 'apple'},
  {label: 'Banana', value: 'banana'},
  {label: 'Orange', value: 'orange'},
  {label: 'Lemon', value: 'lemon'},
]);

// 修改添加下拉的方法
const test = () => {
  setMyArray([...myArray, {
    name: 'hello',
    open: false,
    value: null
  }]);
};

2. 调整zIndex层级，避免组件遮挡 #

遍历渲染下拉时，给每个父容器Card设置递减的zIndex，先添加的下拉层级更高，不会被后添加的组件覆盖

3. 移除无效配置，优化弹出逻辑 #

删除Card的固定高度、childrenContainerStyle的冗余高度，将dropDownDirection改为auto让组件自动判断弹出方向

4. 外层容器替换为ScrollView #

保证下拉列表弹出后页面可滚动，内容不会超出可视区域

完整可运行代码 #

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

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

  const test = () => {
    setMyArray([...myArray, {
      name: 'hello',
      open: false,
      value: null
    }]);
  };

  // 单独封装下拉更新逻辑
  const handleDropdownChange = (index, field, val) => {
    const newArr = [...myArray];
    newArr[index][field] = val;
    setMyArray(newArr);
  };

  return (
    <ScrollView contentContainerStyle={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={{width: '100%', zIndex: 9999 - index, paddingVertical: 10}}>
            <DropDownPicker
              dropDownDirection="auto"
              open={item.open}
              value={item.value}
              items={items}
              setOpen={(val) => handleDropdownChange(index, 'open', val)}
              setValue={(callback) => {
                const val = callback(item.value);
                handleDropdownChange(index, 'value', val);
              }}
              setItems={setItems}
              containerStyle={{width: '70%', alignSelf: 'center'}}
              style={{backgroundColor: '#fafafa'}}
              itemStyle={{justifyContent: 'flex-start'}}
              dropDownStyle={{backgroundColor: '#fafafa', height: 100}}
              dropDownContainerStyle={{
                backgroundColor: 'white',
                elevation: 10,
              }}
            />
          </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>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingVertical: 20,
    alignItems: 'center',
    gap: 10
  },
});

修改后下拉列表会自动选择上下方向弹出，不会被其他组件遮挡，每个下拉选择器的状态独立，可正常选中选项。

内容的提问来源于stack exchange，提问作者Elavarasan r