如果位置绝对,则Touchablehighlight不可点击

Question

我有一个Touchablehighlight,我需要定位绝对,但它在我做之后变得无法点击.

什么可能导致这个？如果我没有将位置设置为绝对,它的功能就像它应该的那样.

Answer 1

解决方案是改变组件的顺序.

我原来拥有的:

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

这是修复:

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

Answer 2

解决了：

我今天遇到了这个问题。我已经解决了。

TouchableOpacity从而react-native-gesture-handler不是导入react-native。

之前：

import {TouchableOpacity} from "react-native";

之后：

import {TouchableOpacity} from 'react-native-gesture-handler'

Answer 3

Dude只是将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
  },

Answer 4

使用 onPressIn 而不是 onPress

这使得该区域可点击！

Answer 5

我TouchableOpacity里面用的是绝对视图。onPress按下后没有调用该函数。但不透明度改变了。我已经尝试了上述所有解决方案，但都没有奏效。

我的解决方案是使用onPressIn而不是onPress.

Touchable*当它在绝对视图中时，ReactNative 中的内部动作似乎很奇怪。

Answer 6

经过两个小时的尝试后，我找到的解决方案是更改按钮位置。

前 ...

  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'
  }
});

有用！！！