React Native Element Dropdown弹窗位置与显示条数问题求助

问题1：弹窗不在下拉框下方，而是屏幕居中 #

• 给包裹Dropdown的父View添加position: 'relative'，作为弹窗的定位基准
• 修改Dropdown的containerStyle为绝对定位，紧贴下拉框下方并对齐左侧，同时设置和下拉框一致的宽度

问题2：弹窗仅显示2条选项，需显示4条 #

• 直接设置固定的maxHeight值（比如200，假设每条选项高度为50），替代依赖数据长度的动态计算，确保最多显示4条

修改后的代码示例 #

<View
  style={{
    width: '50%',
    borderColor: 'rgb(0, 145, 234)',
    paddingLeft: 10,
    paddingRight: 10,
    position: 'relative' // 新增：让弹窗基于父容器定位
  }}>
  <Dropdown
    style={{
      padding: 7,
      borderColor: 'rgb(0, 145, 234)',
      borderWidth: 2,
      marginTop: 5,
    }}
    containerStyle={{
      position: 'absolute',
      left: 10, // 对齐父View的左padding
      top: '100%', // 放在下拉框正下方
      width: 'calc(100% - 20px)', // 匹配下拉框宽度（减去父View的左右padding）
    }}
    maxHeight={200} // 固定高度，刚好显示4条选项
    itemTextStyle={{ color: 'rgb(0, 0, 0)' }}
    data={data}
    labelField="label"
    valueField="value"
    label="Dropdown"
    placeholder={selectedDropdown}
    value={selectedDropdown}
    onChange={(item) => { onChangeScanType(item.value) }}
  />
</View>

额外说明 #

如果使用的是react-native-dropdown-picker这类组件，还可以检查组件自带的anchor或dropDownPosition属性，进一步确保弹窗锚定在下拉框下方。若选项实际高度不是50，可按单条高度 × 4的公式调整maxHeight值。

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