0

我正在尝试react-native-dropdown-picker在提升的TouchableWithoutFeedback容器内使用下拉选择器。但是，每当我单击选择器内的项目时，都会触发TouchableWithoutFeedback下面的组件。我重新创建了一个简单的小吃博览会供参考。我对容器和下拉菜单的样式如下：

container: {
    backgroundColor: 'white',
    borderRadius: 16,
    paddingVertical: 17,
    paddingHorizontal: 20,
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: wp('90%'),
    shadowColor: '#0d263a',
    shadowOpacity: 0.15,
    shadowOffset: { width: 0, height: 15 },
    elevation: 20,
    borderWidth: 2,
    marginBottom: 12,
    zIndex: -1,
  },

下拉菜单样式为：

  container: {
    width: '50%',
  },
  selectedItemContainer: {
    backgroundColor: palette.lightBlue,
  },
  style: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    width: '100%',
    height: 50,
    borderRadius: 8,
    borderWidth: 1,
    borderColor: palette.lightBlue,
    paddingHorizontal: 10,
    backgroundColor: palette.lightBlue,
  },
  label: {
    flex: 1,
    color: palette.darkBlue,
  },
  labelContainer: {
    flex: 1,
    flexDirection: 'row',
  },
  arrowIcon: {
    width: 20,
    height: 20,
  },
  tickIcon: {
    width: 20,
    height: 20,
  },

  listBody: {
    height: '100%',
  },
  listBodyContainer: {
    flexGrow: 1,
    alignItems: 'center',
  },
  dropDownContainer: {
    position: 'absolute',
    backgroundColor: palette.white,
    borderRadius: 8,
    borderColor: palette.white,
    borderWidth: 1,
    width: '100%',
    overflow: 'hidden',
    zIndex: 9999,
    borderBottomEndRadius: 10,
  },
  modalContentContainer: {
    flexGrow: 1,
  },
  listItemContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 10,
    height: 40,
  },
  listItemLabel: {
    flex: 1,
    color: palette.darkBlue,
    textAlign: 'center',
  },

  itemSeparator: {
    height: 1,
    backgroundColor: palette.lightBlue,
  },
  flatListContentContainer: {
    flexGrow: 1,
  },

我不确定错误来自哪里，是因为海拔高度吗？

4

0 回答 0