Сенсорные нажатия не срабатывают в контейнере с абсолютным позиционированием с zIndex (для раскрывающегося списка)

Проблема с вашими стилями в styles.menu, а не с zIndex.

Вы дали position:'absolute' и top:'100%'.

Это означает, что ваше дочернее представление позиционируется как абсолютное по отношению к родительскому представлению, и ваше дочернее представление запустится сразу после завершения родительского представления из-за top:"100%".

Заключение: ваши параметры рендерятся из родителя. да, они видны, потому что ниже нет других компонентов и тем более, что zIndex выше. и вы не можете трогать ничего, что не входит в диапазон родителя.

Решение:

Смотрите рабочую закуску здесь

в styles.menu измените их,

  menu: {
    backgroundColor: 'rgb(73,75,77)',
    zIndex: 1005,
    top: 0,
    left: 0,
    right: 0,
    maxHeight: 300,
  },

и вы также можете удалить zIndex: 1000 и 1005 :)

Вы должны установить позицию для Select вместо Option

вот закуска: https://snack.expo.io/HkDHHo6YV

измените стиль wrap и menu на приведенный ниже:

wrap: {
  position: 'absolute',
  zIndex: 10,
  width: "100%",
  backgroundColor: 'rgb(73,75,77)',
},
menu: {
  backgroundColor: 'rgb(73,75,77)',
  maxHeight: 300,
},

Изменить, рабочее решение

Недостающая часть должна была учитывать пространство под раскрывающимся списком, поскольку он был полностью позиционирован. Мне пришлось изменить компонент Select, чтобы отобразить элемент «заполнение» для учета пространства.

class Select extends React.PureComponent {
  render() {
    const { value, open, options, onOptionPress } = this.props;
    const shadowStyle = shadowStyles[Platform.OS];
    return (
      <>
        <View style = {{height: 60}}></View>
        <View style = {[shadowStyle, styles.wrap]}>
          <TouchableWithoutFeedback onPress = {this.props.onPress}>
            <View style = {styles.selectContainer}>
              <Text>{value}</Text>
            </View>
          </TouchableWithoutFeedback>
          {open && (
            <View style = {styles.menu}>
              {options.map((item, idx) => (
                <Option value = {item} key = {idx} onPress = {onOptionPress} />
              ))}
            </View>
          )}
        </View>
      </>
    );
  }
}

Затем отрегулируйте высоту styles.selectContainer, чтобы она была одинаковой высоты 60

selectContainer: {
  padding: 16,
  height: 60
},

Полный рабочий пример

import * as React from 'react';
import {
  Text,
  Button,
  View,
  StyleSheet,
  Platform,
  TouchableWithoutFeedback,
  TouchableOpacity,
} from 'react-native';

class Dropdown extends React.Component {
  constructor() {
    super();
    this.state = {
      open: false,
      selected: undefined,
    };
  }

  handleSelectPress = () => {
    this.setState({ open: !this.state.open });
  };
  handleOptionPress = item => {
    this.setState({ selected: item, open: !this.state.open });
    this.props.onSelectOption(item);
  };
  render() {
    const { selected = {}, open } = this.state;
    const { placeholder = '', options = [] } = this.props;

    return (
      <Select
        onPress = {this.handleSelectPress}
        value = {selected.name || placeholder}
        open = {open}
        options = {options}
        onOptionPress = {this.handleOptionPress}
      />
    );
  }
}

const shadowStyles = {
  ios: {
    shadowOpacity: 0.3,
    shadowRadius: 3,
    shadowOffset: {
      height: 1,
      width: 1,
    },
  },
  android: {
    elevation: 5,
  },
};

class Select extends React.PureComponent {
  render() {
    const { value, open, options, onOptionPress } = this.props;
    const shadowStyle = shadowStyles[Platform.OS];
    return (
      <>
        <View style = {{height: 60}}></View>
        <View style = {[shadowStyle, styles.wrap]}>
          <TouchableWithoutFeedback onPress = {this.props.onPress}>
            <View style = {styles.selectContainer}>
              <Text>{value}</Text>
            </View>
          </TouchableWithoutFeedback>
          {open && (
            <View style = {styles.menu}>
              {options.map((item, idx) => (
                <Option value = {item} key = {idx} onPress = {onOptionPress} />
              ))}
            </View>
          )}
        </View>
      </>
    );
  }
}

class Option extends React.PureComponent {
  handlePress = () => {
    this.props.onPress(this.props.value);
  };
  render() {
    const { value } = this.props;
    return (
      <TouchableOpacity onPress = {this.handlePress}>
        <View style = {styles.optionContainer}>
          <Text>{value.name}</Text>
        </View>
      </TouchableOpacity>
    );
  }
}

export default class App extends React.Component {
  render() {
    return (
      <View style = {styles.root}>
        <Dropdown
          placeholder = "--- SELECT ---"
          options = {[
            { name: 'Press me!', id: '1' },
            { name: 'No Me!', id: '2' },
            { name: 'Cmon guys, here!', id: '3' },
          ]}
          onSelectOption = {item => console.info(`item pressed! ${item}`)}
        />
        <Text>hellof</Text>
        <View style = {{backgroundColor: "red", height: 250}} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  root: {
    width: 360,
    height: 640,
    backgroundColor: '#292c2e',
    marginTop: 100
  },
  wrap: {
    position: 'absolute',
    zIndex: 10,
    width: "100%",
    backgroundColor: 'rgb(73,75,77)',
  },
  selectContainer: {
    padding: 16,
    height: 60
  },
  menu: {
    backgroundColor: 'rgb(73,75,77)',
    maxHeight: 300,
  },
  optionContainer: {
    padding: 16,
    height: 60
  },
});