Javascript React Native view未在绝对定位的父容器内接收触摸输入？

我非常熟悉zIndex以及定位系统如何在web上与常规HTML一起工作。我的问题可能特定于我正在使用的组件库，但我无法使下拉项响应触摸

我有一个绝对定位的父容器。在该视图中，我有一个组件，我的下拉列表在单击时打开。我无法选择下拉元素，除非它们位于父视图的高度范围内

我尝试过调整每个容器的位置和zIndex，但没有成功。这是图书馆的局限性还是我在这里遗漏了一些明显的东西

编辑：根据文档中的android部分，我已经在另一个绝对定位视图中包装了我的自动完成，但索引也存在同样的问题。我正在android上测试，但需要它跨平台工作

父组件：

const dropDownProps = {
  data: ['Cat', 'Dog', 'Chicken'],
  currentValue: 'Cat',
  onChange: e => {
    console.log(e, 'callback');
  },
  viewStyles: {
    flex: 1,
    marginHorizontal: 5,
  },
};

<View style={styles.container}>
  <View style={styles.bottomBar}>
    <DropDownSelect {...dropDownProps} />
  </View>
</View>

const styles = {
  container: {
    position: 'absolute',
    top: 10,
    left: 10,
    right: 10,
    borderRadius: 2,
    backgroundColor: black,
    paddingRight: 5,
    zIndex: X <-- this does nothing
  },
  bottomBar: {
    width: '100%',
    paddingBottom: 5,
    flexDirection: 'row',
    borderRadius: 20,
    alignItems: 'center',
    zIndex: X <-- this also does nothing
  },
}

import React, {useState} from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
import Autocomplete from 'react-native-autocomplete-input';
import Icon from 'react-native-vector-icons/MaterialIcons';

const DropDownSelect = ({
  data,
  currentValue,
  onChange,
  viewStyles,
  containerStyles,
}) => {
  const [hideResults, setHideResults] = useState(true);
  const [value, setValue] = useState(currentValue);
  const onSelect = val => {
    setHideResults(true);
    setValue(val);
    onChange(val);
  };

  return (
    <View style={{minHeight: 35, ...viewStyles}}>
      <View style={{...styles.autocompleteContainer, ...containerStyles}}>
        <Autocomplete
          data={data}
          listStyle={styles.listStyles}
          inputContainerStyle={styles.inputContainer}
          keyExtractor={item => item}
          returnKeyType={'next'}
          hideResults={hideResults}
          renderTextInput={() => (
            <TouchableOpacity
              activeOpacity={0.5}
              style={styles.textInputItem}
              onPress={() => setHideResults(!hideResults)}>
              <Text style={styles.textInputItemText}>{value}</Text>
              <View style={styles.dropdownIcon}>
                <Icon
                  size={24}
                  color={'white'}
                  name="arrow-drop-down"
                />
              </View>
            </TouchableOpacity>
          )}
          renderItem={({item}) => (
            <TouchableOpacity onPress={() => onSelect(item)}>
              <Text style={styles.listTextStyle}>{item}</Text>
            </TouchableOpacity>
          )}
        />
      </View>
    </View>
  );
};

const styles = {
  autocompleteContainer: {
    flex: 1,
    left: 0,
    position: 'absolute',
    borderRadius: 2,
    right: 0,
    top: 0,
  },
  inputContainer: {
    backgroundColor: 'red',
    borderWidth: 0,
  },
  listStyles: {
    backgroundColor: 'blue',
    borderWidth: 0,
    margin: 0,
  },
  listTextStyle: {
    color: 'white',
    width: '100%',
    paddingVertical: 8,
    paddingLeft: 20,
  },
  textInputItem: {
    height: 35,
    alignItems: 'center',
    paddingLeft: 20,
    flexDirection: 'row',
  },
  textInputItemText: {
    color: 'white',
  },
  dropdownIcon: {
    marginLeft: 'auto',
    borderBottomRightRadius: 2,
    borderTopRightRadius: 2,
    height: '100%',
    width: 35,
    backgroundColor: 'red',
    alignItems: 'center',
    justifyContent: 'center',
  },
};
export default DropDownSelect;

“我的孩子”下拉列表组件：

const dropDownProps = {
  data: ['Cat', 'Dog', 'Chicken'],
  currentValue: 'Cat',
  onChange: e => {
    console.log(e, 'callback');
  },
  viewStyles: {
    flex: 1,
    marginHorizontal: 5,
  },
};

<View style={styles.container}>
  <View style={styles.bottomBar}>
    <DropDownSelect {...dropDownProps} />
  </View>
</View>

const styles = {
  container: {
    position: 'absolute',
    top: 10,
    left: 10,
    right: 10,
    borderRadius: 2,
    backgroundColor: black,
    paddingRight: 5,
    zIndex: X <-- this does nothing
  },
  bottomBar: {
    width: '100%',
    paddingBottom: 5,
    flexDirection: 'row',
    borderRadius: 20,
    alignItems: 'center',
    zIndex: X <-- this also does nothing
  },
}

import React, {useState} from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
import Autocomplete from 'react-native-autocomplete-input';
import Icon from 'react-native-vector-icons/MaterialIcons';

const DropDownSelect = ({
  data,
  currentValue,
  onChange,
  viewStyles,
  containerStyles,
}) => {
  const [hideResults, setHideResults] = useState(true);
  const [value, setValue] = useState(currentValue);
  const onSelect = val => {
    setHideResults(true);
    setValue(val);
    onChange(val);
  };

  return (
    <View style={{minHeight: 35, ...viewStyles}}>
      <View style={{...styles.autocompleteContainer, ...containerStyles}}>
        <Autocomplete
          data={data}
          listStyle={styles.listStyles}
          inputContainerStyle={styles.inputContainer}
          keyExtractor={item => item}
          returnKeyType={'next'}
          hideResults={hideResults}
          renderTextInput={() => (
            <TouchableOpacity
              activeOpacity={0.5}
              style={styles.textInputItem}
              onPress={() => setHideResults(!hideResults)}>
              <Text style={styles.textInputItemText}>{value}</Text>
              <View style={styles.dropdownIcon}>
                <Icon
                  size={24}
                  color={'white'}
                  name="arrow-drop-down"
                />
              </View>
            </TouchableOpacity>
          )}
          renderItem={({item}) => (
            <TouchableOpacity onPress={() => onSelect(item)}>
              <Text style={styles.listTextStyle}>{item}</Text>
            </TouchableOpacity>
          )}
        />
      </View>
    </View>
  );
};

const styles = {
  autocompleteContainer: {
    flex: 1,
    left: 0,
    position: 'absolute',
    borderRadius: 2,
    right: 0,
    top: 0,
  },
  inputContainer: {
    backgroundColor: 'red',
    borderWidth: 0,
  },
  listStyles: {
    backgroundColor: 'blue',
    borderWidth: 0,
    margin: 0,
  },
  listTextStyle: {
    color: 'white',
    width: '100%',
    paddingVertical: 8,
    paddingLeft: 20,
  },
  textInputItem: {
    height: 35,
    alignItems: 'center',
    paddingLeft: 20,
    flexDirection: 'row',
  },
  textInputItemText: {
    color: 'white',
  },
  dropdownIcon: {
    marginLeft: 'auto',
    borderBottomRightRadius: 2,
    borderTopRightRadius: 2,
    height: '100%',
    width: 35,
    backgroundColor: 'red',
    alignItems: 'center',
    justifyContent: 'center',
  },
};
export default DropDownSelect;

---

我想您已经解决了您的问题，但对于那些仍在寻找解决方案的人，请使用react native手势处理程序库中的TouchableOpacity或任何其他Touchables

它们是否在父视图中并不重要。你可以随意触摸它们