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

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

我正在使用 React-native-dropdown-picker,但是我无法从下拉列表中选择任何项目,这些项目被下面的 View 重叠。
我试过添加 position:'absolute, zIndex:2 但仍然是 itemlist 重叠如下:
enter image description here
我已经编写了下拉组件的代码如下

 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));
    }
  }
请让我知道这个问题,任何帮助将不胜感激。

最佳答案

如果有人仍然没有得到这个,我在这里找到了一些东西
这都与父元素有关,因此如果 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>

关于reactjs - 无法从 react-native-dropdown-picker 中选择项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64999714/

相关文章:

react-native - 如何处理或阻止硬件后退按钮对 native Modal进行响应?

ReactJS Material-UI 如何设置始终覆盖文本字段的自动完成样式

javascript - webpack 路径浏览器 polyfill 失败

javascript - 在功能组件中存储非状态变量

android - React-Native : react-native-fast-image not working properly with react-native, 它给出错误

react-native run-android 失败,无法安装应用

javascript - 使用 React Native 将一个数组拆分为两个数组

node.js - 创建新的 React Native 应用程序

react-native - 自定义发送按钮和清除 textInput react-native-gifted-chat

reactjs - React-native FlatList 项目没有达到正确的高度