[英]unable to select item from react-native-dropdown-picker
am using React-native-dropdown-picker, however am unable to select any item from the dropdown list, the items are being overlapped by the below view.我正在使用 React-native-dropdown-picker,但是我无法从下拉列表中选择任何项目,这些项目正在与下面的视图重叠。 I have tried adding position:'absolute, zIndex:2 but still the itemlist is being overlapped as follows:
我尝试添加 position:'absolute, zIndex:2 但 itemlist 仍然重叠如下:
I have written the code for dropdown component as follows我已经编写了下拉组件的代码如下
return (
<View>
<View style={styles.container}>
{console.log('new array', dateArr)}
{console.log('arr', arr)}
<Icon
name="arrow-left"
size={20}
color="#fff"
style={{marginTop: 12}}
/>
{console.log('----------date', dateArr)}
{dateArr != null && (
<DropDownPicker
onValueChange={(value) => onValSelect(value)}
items={dateArr}
itemStyle={{
// justifyContent: 'flex-start',
flexDirection:'row'
}}
containerStyle={{height: 40,width:'80%',zIndex:2}}
/>
)}
</View>
<DaysInAWeek daysInAWeek={daysInAWeek} />
</View>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#FE017E',
// height: 56,
width: '100%',
flexDirection: 'row',
padding: 10,
},
});
onValSelect() is as follows: onValSelect() 如下:
function onValSelect(val) {
if (val.length > 1) {
let arr = [];
for (let i = val[0]; i <= val[1]; i += 86400000) {
let date = getMonthDate(new Date(i));
arr.push(date);
}
console.log('final arr', arr);
setDaysInAWeek(arr);
} else {
console.log('single date', new Date(val));
setDaysInAWeek(new Date(val));
}
}
please let me know the issue any help would be appreciated.请让我知道这个问题任何帮助将不胜感激。
If somebody still didn't get this, here something I found This is all related to the parent element, so if DropDownPicker component does not have a parent element with some height then this would not let you select even if you see the options.如果有人仍然没有得到这个,我在这里找到了这一切都与父元素有关,所以如果 DropDownPicker 组件没有具有一定高度的父元素,那么即使你看到选项,这也不会让你选择。
just give parent element minHeight:300px
or any height you want Example -只需给父元素
minHeight:300px
或您想要的任何高度示例 -
<View style={{minHeight: 300}}>
<DropDownPicker
items={timeslots}
defaultValue={this.state.selected2}
containerStyle={{height: 40}}
style={{backgroundColor: '#fafafa'}}
itemStyle={{
justifyContent: 'flex-start',
}}
dropDownStyle={{backgroundColor: '#fafafa'}}
onChangeItem={(item) =>
this.setState({
selected2: item.value,
});
}
/>
</View>
I solved this problem in this way:我以这种方式解决了这个问题:
const [open, setOpen] = useState(false);
...
<View style={[style.viewContainer, Platform.OS === 'android' && open && style.androidContainer]}>
<DropDownPicker
open={open}
setOpen={setOpen}
...
styles:款式:
viewContainer: { marginHorizontal: 16, zIndex: 1 },
androidContainer: {
minHeight: 500,
marginBottom: -428,
},
<View style={{ zIndex: 999}}>
<DropDownPicker
...
/>
adding Zindex for View worked for me
使 zIndex: -1 用于重叠的组件, zIndex: 1 用于下拉选择器
cost dataArr=[
{label: 'USA', value: 'usa'},
{label: 'UK', value: 'uk' },
{label: 'France', value: 'france'},
];
<DropDownPicker
items={dataArr}
defaultValue="Select Country"
containerStyle={{height: 40}}
style={{backgroundColor: '#fafafa'}}
itemStyle={{
justifyContent: 'flex-start'
}}
dropDownStyle={{backgroundColor: '#fafafa'}}
onChangeItem={item => this.setState({
country: item.value
})}
/>
I guess the problem is with your item style.我想问题出在你的物品风格上。 can you change the flex-direction to column?
您可以将 flex-direction 更改为列吗?
i had the same issue.我遇到过同样的问题。 But after i enclose my dropdown picker inside a
View
, i am able to make it work.但是在我将下拉选择器包含在
View
,我就可以让它工作了。
so所以
<View>
<DropDownPicker
//... your implementations here
/>
</View>
Changing the DropDown Direction worked for me.更改下拉方向对我有用。
dropDownDirection ="TOP" dropDownDirection =“顶部”
const heightDropItem = 40 // your height items
<View style={{minHeight: open ? (items.length + 1) * heightDropItem : heightDropItem}}>
<DropDownPicker
style={{
borderWidth: 2,
borderRadius: 4,
borderColor: colors.textHiragino,
fontSize: 16,
}}
placeholder="2022年"
open={open}
value={value}
items={items}
setOpen={setOpen}
setValue={setValue}
setItems={setItems}
multiple={false}
/>
</View>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.