React Native - TouchableOpacity не работает в абсолютном положении View

У меня есть абсолютно позиционированное представление, которое содержит 3 компонента TouchableOpacity, а 3 не отвечают, они просто не работают вообще, что здесь не так, пожалуйста, помогите мне :)

Код

<View style={[styles.highNormalLowDocListHeaderStateContainer, {width: this.windowWidth, height: this.headerSmallHeight, position: 'absolute', left: 0, top: floatedHeaderTitleTop, elevation: 2}]}>
    <TouchableOpacity onPress={() => this.getDocuments('high')} style={[styles.highNormalLowDocListHeaderStateTextContainer, highSelected.borderStyle]}>
        <Text style={[styles.highNormalLowDocListHeaderStateText, highSelected.textStyle]}>HIGH</Text>
    </TouchableOpacity>
    <TouchableOpacity onPress={() => this.getDocuments('normal')} style={[styles.highNormalLowDocListHeaderStateTextContainer, normalSelected.borderStyle]}>
        <Text style={[styles.highNormalLowDocListHeaderStateText, normalSelected.textStyle]}>NORMAL</Text>
    </TouchableOpacity>
    <TouchableOpacity onPress={() => this.getDocuments('low')} style={[styles.highNormalLowDocListHeaderStateTextContainer, lowSelected.borderStyle]}>
        <Text style {[styles.highNormalLowDocListHeaderStateText, lowSelected.textStyle]}>LOW</Text>
    </TouchableOpacity>
</View>

Скриншот

Ответ 1

Посмотрите на ваш импорт. Если импортировать {TouchableOpacity} из 'response-native-жест-обработчик'; не работает Вам нужно импортировать это из "Reaction-native"

Ответ 2

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

Ответ 3

Чувак, просто иди и добавь zIndex: 1 к представлению, содержащему кнопки и бум, которые ты сделал в большинстве случаев. Также обратите внимание, что добавление высоты добавляет тень к кнопке Android, и иногда повышение также может быть проблемой, если ее добавить к родительскому элементу и не добавить к дочернему элементу, тогда дочерняя кнопка может не работать. (Редкий случай)

например:

buttonContainers:
  {
    zIndex: 1,
    alignSelf: 'flex-end',
    position: 'absolute',
    top:5,
    right: 5,
    height: 40,
    borderWidth: 1,
    justifyContent: 'center',
    alignContent: 'center',
    width: 80
  },

Ответ 4

Если onPress TouchableOpacity не работает, в этом случае TouchableNativeFeedback будет работать

Пример:

{ Platform.OS === 'ios' ?
  <TouchableOpacity onPress={() => this.showPassordText()}>
    <Text style={{ color: 'red' }}>SHOW</Text>  
  </TouchableOpacity>
  :
  <TouchableNativeFeedback onPress={() => this.showPassordText()}>
    <Text style={{ color: 'red' }}>SHOW</Text>
  </TouchableNativeFeedback>
}

Ответ 5

Часто, когда выполняется абсолютное позиционирование, вы должны поместить zIndex, потому что абсолютное отложенное представление пользовательского интерфейса иногда отображается позади другого представления.