无法 select 来自 react-native-dropdown-picker 的项目
unable to select item from react-native-dropdown-picker
我正在使用 React-native-dropdown-picker,但是我无法 select 下拉列表中的任何项目,这些项目与下面的视图重叠。
我尝试添加 position:'absolute, zIndex:2 但项目列表仍然重叠如下:
下拉组件的代码是这样写的
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()方法如下:
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));
}
}
请告诉我这个问题,我们将不胜感激。
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
})}
/>
我想问题出在您的项目样式上。你能把 flex-direction 改成 column 吗?
如果还有人不明白,这里是我找到的东西
这都与父元素有关,因此如果 DropDownPicker 组件没有具有一定高度的父元素,那么即使您看到选项,也不会让您 select。
只需给父元素 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>
<View style={{ zIndex: 999}}>
<DropDownPicker
...
/>
为 View 添加 Zindex 对我有用
更改下拉菜单方向对我有用。
dropDownDirection ="顶部"
我是这样解决这个问题的:
const [open, setOpen] = useState(false);
...
<View style={[style.viewContainer, Platform.OS === 'android' && open && style.androidContainer]}>
<DropDownPicker
open={open}
setOpen={setOpen}
...
样式:
viewContainer: { marginHorizontal: 16, zIndex: 1 },
androidContainer: {
minHeight: 500,
marginBottom: -428,
},
为重叠的组件设置 zIndex: -1,为下拉选择器设置 zIndex: 1
我正在使用 React-native-dropdown-picker,但是我无法 select 下拉列表中的任何项目,这些项目与下面的视图重叠。
我尝试添加 position:'absolute, zIndex:2 但项目列表仍然重叠如下:
下拉组件的代码是这样写的
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()方法如下:
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));
}
}
请告诉我这个问题,我们将不胜感激。
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
})}
/>
我想问题出在您的项目样式上。你能把 flex-direction 改成 column 吗?
如果还有人不明白,这里是我找到的东西 这都与父元素有关,因此如果 DropDownPicker 组件没有具有一定高度的父元素,那么即使您看到选项,也不会让您 select。
只需给父元素 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>
<View style={{ zIndex: 999}}>
<DropDownPicker
...
/>
为 View 添加 Zindex 对我有用
更改下拉菜单方向对我有用。
dropDownDirection ="顶部"
我是这样解决这个问题的:
const [open, setOpen] = useState(false);
...
<View style={[style.viewContainer, Platform.OS === 'android' && open && style.androidContainer]}>
<DropDownPicker
open={open}
setOpen={setOpen}
...
样式:
viewContainer: { marginHorizontal: 16, zIndex: 1 },
androidContainer: {
minHeight: 500,
marginBottom: -428,
},
为重叠的组件设置 zIndex: -1,为下拉选择器设置 zIndex: 1