是否有办法降低下拉选择器的高度(react-native-dropdown-picker模块)

pnwntuvh  于 2022-11-17  发布在  React
关注(0)|答案(4)|浏览(202)

Dropdown Picker Screenshot
增加容器的高度没有问题,但是我想给容器设置样式来降低它的高度。我已经尝试过改变所有带有样式属性的道具,但是我仍然不能降低它的高度。下面是我的代码。

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,
  },
});

Dropdown Picker Screenshot with react-devtools
在使用react-devtools模块时,我调试了可以改变高度的地方。有没有办法降低它的高度?(显然是devtools中的minHeight)

  • 编辑
dauxcl2d

dauxcl2d1#

你好,尝试添加maxHeight如下?
最大高度={200}
从他们的网站上查看文档:https://hossein-zare.github.io/react-native-dropdown-picker-website/

sq1bmfud

sq1bmfud2#

正如Glen所建议的,maxHeight就是您的答案。

7y4bm7vi

7y4bm7vi3#

你可以在node_modules文件夹的src/themes/dark/index.js或src/themes/light/index.js中查看react-native-dropdown-picker源代码。作者对样式表类中的容器高度做了minHeight:50处理,这个类的名称是style。你可以通过DropDownPicker样式属性传递你自己的minHeight来覆盖它。
我认为与列表Item相同,只是找到正确的样式属性并覆盖它。

s5a0g9ez

s5a0g9ez4#

您必须在dropdown_container中设置minHeight和paddingHorizontal。这样您就可以降低下拉列表的高度。

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

相关问题