如何调整react-native-dropdown-picker组件的Modal弹窗尺寸

解决方案 #

你之前的写法不生效是因为 React Native 原生的 Modal 组件本身不支持直接传入 width、height 属性，你需要调整属性的传入位置：

1. 在 modalProps 中通过 style 字段配置 Modal 外层全屏容器的样式，设置为弹性布局居中，这样内部的内容容器才能按自定义尺寸展示
2. 自定义尺寸的参数直接写在 modalContentContainerStyle 中即可

import DropDownPicker from 'react-native-dropdown-picker';
import { useState } from 'react';

function App() {
  const [open, setOpen] = useState(false);
  const [value, setValue] = useState(null);
  const [items, setItems] = useState([
    {label: 'Apple', value: 'apple'},
    {label: 'Banana', value: 'banana'}
  ]);

  return (
    <DropDownPicker
      open={open}
      value={value}
      items={items}
      setOpen={setOpen}
      setValue={setValue}
      setItems={setItems}
      listMode="MODAL"
      modalProps={{
        animationType: "fade",
        // 配置Modal外层全屏容器样式
        style: {
          backgroundColor: 'rgba(0,0,0,0.5)', // 半透明遮罩背景
          flex: 1,
          justifyContent: 'center', // 垂直居中
          alignItems: 'center' // 水平居中
        }
      }}
      // 配置选项内容容器的样式
      modalContentContainerStyle={{
        backgroundColor: "#fff",
        width: '80%', // 自定义宽度
        maxHeight: '50%', // 自定义最大高度，选项过多会自动滚动
        borderRadius: 8
      }}
    />
  );
}

补充调整说明

• 如果需要调整弹窗的位置，修改 modalProps.style 中的 justifyContent 和 alignItems 属性即可
• 如果需要给选项列表单独设置样式，可以新增 listItemContainerStyle 属性配置
• 以上写法适配 react-native-dropdown-picker 5.x 及以上版本

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