有没有一种方法可以减小下拉选择器（react-native-dropdown-picker模块）的高度？

Question

下拉选择器截图

增加高度没有问题，但我想样式容器来减小它的高度。我尝试了改变所有属性和样式属性，但仍然无法减小其高度。以下是我的代码。

import {
  ThemeProvider,
  createTheme,
  Header,
  Text,
  SocialIcon,
  Button,
  Divider,
  Overlay,
  SearchBar,
  ListItem,
  Avatar,
} from '@rneui/themed';
import DropDownPicker from 'react-native-dropdown-picker';

// code here
<View>
  <View>
    <Text
      style={{
        fontSize: 14,
        color: COLORS.gray_header2,
      }}>
      Label 2:
    </Text>
    <DropDownPicker
      open={open}
      value={value}
      items={items}
      setOpen={setOpen}
      setValue={setValue}
      setItems={setItems}
      style={styles.dropdown_container}
      textStyle={styles.dropdown_itemstyle}
    />
  </View>
</View>

//code here

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },

  dropdown_container: {
    width: '100%',
    backgroundColor: COLORS.dirty_white,
    borderRadius: 6,
    borderColor: COLORS.gray_filter,
  },
  
  dropdown_itemstyle: {
    color: COLORS.gray_header,
    borderColor: COLORS.gray_filter,
    marginLeft: 10,
  },
});

使用 react-devtools 模块后，我已经调试了高度可以更改的位置。有没有办法减小它的高度？（显然是 devtools 中的 minHeight）

编辑 容器本身的高度（而不是单击时的下拉菜单）

- user19923908

Answer 1

如果有人遇到大小的问题，最小高度（minHeight）对我很有效。请参见下面的示例。

<DropDownPicker
                style={{
                  borderWidth: 1, 
                  borderColor: '#d5d5d9',  
                  backgroundColor: '#eee',
                  borderRadius: 40, 
                  paddingHorizontal: 5,
                  minHeight: 30,   // <---- here               
                }} 
/>                     

- Sir'Energieman

Answer 2

您需要在下拉菜单容器中设置minHeight和paddingHorizontal。这样，您就可以减小下拉菜单的高度。

dropdown_container: {
  width: '100%',
  backgroundColor: COLORS.dirty_white,
  borderRadius: 6,
  borderColor: COLORS.gray_filter,
  paddingHorizontal: 5,
  minHeight: 30,
},

- Ivan

Answer 3

正如Glen所建议的那样，maxHeight就是你要找的答案。

- Shahjahan

---

如果我之前表述不够清楚，非常抱歉。我所指的高度是容器本身的高度，而不是下拉菜单被点击时的高度。为了更加明确我的意思，我已经附上了另一张图片。 - user19923908

尝试使用此属性 props={{ style: { height: 40 } }}。 - Shahjahan

只传递这两个属性，则手势将无法正确处理。 maxHeight={300} containerProps={{ height: 300 }} - Sayan Dey

Answer 4

嗨，尝试按照以下方式添加maxHeight？

maxHeight={200}

请查看他们网站上的文档：https://hossein-zare.github.io/react-native-dropdown-picker-website/

- Glen Bowler

---

我尝试添加它，但遗憾的是在下拉选择器中没有任何变化，只有下拉菜单的高度发生了改变。 - user19923908

Answer 5

您可以在 node_modules 文件夹中的 src/themes/dark/index.js 或 src/themes/light/index.js 中查看 react-native-dropdown-picker 的源代码。作者在样式表类中的容器高度上设置了 minHeight:50。您可以通过 DropDownPicker 样式属性传递自己的 minHeight 来覆盖它。

我认为与列表项相同，只需找到正确的样式属性并覆盖即可。

- RRFam

Answer 6

最小高度被忽略了，因为它看起来是硬编码在主题文件中的。 一个很好的例子就是这个 MR - https://github.com/hossein-zare/react-native-dropdown-picker/pull/555 因此，我计划创建自定义主题，就像文档中描述的那样https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/advanced/themes

- nocookies

---

您是否与您推荐的内容有任何关联？https://stackoverflow.com/help/promotion - Yunnosch