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)
- 编辑
4条答案
按热度按时间dauxcl2d1#
你好,尝试添加maxHeight如下?
最大高度={200}
从他们的网站上查看文档:https://hossein-zare.github.io/react-native-dropdown-picker-website/
sq1bmfud2#
正如Glen所建议的,maxHeight就是您的答案。
7y4bm7vi3#
你可以在node_modules文件夹的src/themes/dark/index.js或src/themes/light/index.js中查看react-native-dropdown-picker源代码。作者对样式表类中的容器高度做了
minHeight:50
处理,这个类的名称是style。你可以通过DropDownPicker样式属性传递你自己的minHeight来覆盖它。我认为与列表Item相同,只是找到正确的样式属性并覆盖它。
s5a0g9ez4#
您必须在dropdown_container中设置minHeight和paddingHorizontal。这样您就可以降低下拉列表的高度。