无法从 react-native-dropdown-picker 中选择项目答案

【问题标题】：unable to select item from react-native-dropdown-picker无法从 react-native-dropdown-picker 中选择项目
【发布时间】：2022-01-29 17:39:56
【问题描述】：

我正在使用 React-native-dropdown-picker，但是无法从下拉列表中选择任何项目，这些项目正在与下面的视图重叠。我已经尝试添加 position:'absolute, zIndex:2 但 itemlist 仍然被重叠如下：

我已经编写了下拉组件的代码如下

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

请让我知道问题任何帮助将不胜感激。

【问题讨论】：

嘿，您找到解决方案了吗？我在父视图中添加了 zindex 来解决这个问题，但最终出现了另一个问题。现在我无法从列表中选择任何内容。
@Reema 是的，如果您阅读了它提到的文档，父容器中的 zIndex 可能会导致此类问题，请使用下拉选择器的样式属性来获取您想要的任何样式，这已解决了我的问题

标签： reactjs react-native react-native-android react-native-ios

【解决方案1】：

如果有人仍然没有得到这个，我在这里找到了一些东西这都与父元素有关，因此如果 DropDownPicker 组件没有具有一定高度的父元素，那么即使您看到选项也不会让您选择。

只需给父元素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>

【讨论】：

是的，这对我有帮助。为父视图添加了最小高度。非常感谢！

【解决方案2】：

我是这样解决这个问题的：

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

【讨论】：

【解决方案3】：

 <View style={{ zIndex: 999}}>
       <DropDownPicker
           ...
         />

为 View 添加 Zindex 对我有用

【讨论】：

【解决方案4】：

为重叠的组件设置 zIndex: -1，为下拉选择器设置 zIndex:1

【讨论】：

【解决方案5】：

 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 吗？

【讨论】：

嗨，已经添加了 onValSelect 的代码，这是一个样式问题已修复，但我仍然无法从下拉列表中选择任何内容，您能帮忙吗？
style prop 确实有帮助，但是为父容器添加 flexdirection 使其无法触及
以这种风格添加itemStyle={{ justifyContent: 'flex-start' }}？弯曲方向的目的是什么？请解释一下。
项目将从边距左侧开始
labelStyle:这个属性可以完全控制标签`labelStyle={{ fontSize: 14, textAlign: 'left', color: '#000' }}`

【解决方案6】：

更改下拉方向对我有用。

dropDownDirection ="TOP"

【讨论】：