React Native中react-native-dropdown-picker下拉列表透明度调整问题

要让下拉列表完全遮挡下方的"My text"，你需要调整组件的遮罩层和列表容器样式，而非使用listParentContainerStyle，具体修改如下：

关键修改点 #

• 添加overlayColor属性：设置下拉展开时的全屏遮罩为不透明白色，覆盖所有下方内容
• 配置listContainerStyle：确保下拉列表自身背景不透明，同时提升层级避免被下方元素覆盖

修改后的完整代码 #

import React, { useState } from 'react';
import {
  Text,
  useColorScheme,
  View,
} from 'react-native';
import { Colors } from 'react-native/Libraries/NewAppScreen';
import DropDownPicker from 'react-native-dropdown-picker';

function App(): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  const [open, setOpen] = useState(false);
  const [value, setValue] = useState(null);
  const [items, setItems] = useState([
    {
      label: 'Option 1',
      value: 'option1',
    },
    {
      label: 'Option 2',
      value: 'option2',
    },
    {
      label: 'Option 3',
      value: 'option3',
    },
  ]);

  return (
    <View style={{
        backgroundColor: "white",
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        paddingHorizontal: 15
      }}>
      <Text>Selected Value: {value}</Text>
      <DropDownPicker
        open={open}
        value={value}
        items={items}
        setOpen={setOpen}
        setValue={setValue}
        setItems={setItems}
        placeholder="Select an option"
        containerStyle={{ width: 400, backgroundColor: "white"}}
        listItemLabelStyle={{ fontSize: 16 }}
        showArrowIcon={true}
        hideSelectedItemIcon={true}
        theme="LIGHT"
        // 新增核心配置
        overlayColor="rgba(255, 255, 255, 1)"
        listContainerStyle={{ 
          backgroundColor: 'white',
          zIndex: 10
        }}
      />
      <Text>My text</Text>
    </View>
  );
}

export default App;

说明 #

• overlayColor：下拉展开时生成全屏遮罩，设置为完全不透明白色后，会直接挡住所有下方元素
• listContainerStyle：确保下拉列表自身背景不透明，同时通过zIndex锁定它的视觉层级，避免被下方文本穿透

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