Touchablehighlight не может быть нажат, если позиция абсолютная

Ответ 1

Решение заключалось в изменении порядка компонентов.

Что я изначально имел:

<TouchableHighLight><Text>Click me</Text></TouchableHighlight>
<View> .... </View>

Это было исправление:

<View>...</View>
<TouchableHighLight><Text>Click me</Text></TouchableHighlight>

Ответ 2

Чувак, просто иди и добавь 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
  },

Ответ 3

Попробовав все в течение двух часов, я нашел решение изменить положение моей кнопки.

До...

  export default class Navbar extends Component {

  componentDidMount() {
    console.log(this.props);
  }

  render() {
    return (
      <View style={styles.content}>
        <TouchableOpacity
          onPress={this.props.openModal}
          style={styles.containerButton}
        >
          <Text>New</Text>
        </TouchableOpacity>
        <Text style={styles.textCenter}>Remember me</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  content: {
    paddingTop: 30,
    paddingBottom: 10,
    backgroundColor: '#81C04D',
    flexDirection: 'row'
  },
  containerButton: {
    position: 'absolute',
    top: 30,
    left: 8
  },
  textCenter: {
    flex: 1,
    textAlign: 'center',
    fontWeight: 'bold'
  }
});

После...

export default class Navbar extends Component {

  componentDidMount() {
    console.log(this.props);
  }

  render() {
    return (
      <View style={styles.content}>
        <Text style={styles.textCenter}>Remember me</Text>
        <TouchableOpacity
          onPress={this.props.openModal}
          style={styles.containerButton}
        >
          <Text>New</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  content: {
    paddingTop: 30,
    paddingBottom: 10,
    backgroundColor: '#81C04D',
    flexDirection: 'row'
  },
  containerButton: {
    position: 'absolute',
    top: 30,
    left: 8
  },
  textCenter: {
    flex: 1,
    textAlign: 'center',
    fontWeight: 'bold'
  }
});

Это работает !!!

Ответ 4

Я использовал TouchableOpacity внутри абсолютного обзора. Функция onPress не была вызвана после нажатия. Но непрозрачность изменилась. Я испробовал все вышеперечисленные решения, но ни одно из них не работает.

Мои решения - использовать onPressIn вместо onPress.

Кажется, что внутреннее действие Touchable* странно в ReactNative, когда оно в абсолютном представлении.

Ответ 5

  используйте onPressIn вместо onPress

Это сделало область кликабельной!