如果绝对位置，Touchablehighlight 不可点击

Question

我有一个 Touchablehighlight 需要绝对定位，但在我这样做后它变得无法点击。

是什么原因造成的？如果我没有将位置设置为绝对，它的功能就像它应该的那样。

Answer 1

我的问题完全不同，我的按钮容器上设置了一个 backgroundColor 样式属性。颜色没用。我错过了删除这个无用的属性。最后，这个 backgroundColor 在我的按钮上方制作了一个不可见的表格。删除它使其再次可点击。

我只在 Android 上遇到过这个问题。

Answer 2

在尝试了两个小时后，我找到的解决方案是改变我的按钮位置。

之前...

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

有效！！！

Answer 3

另一种解决方案.....

对我来说，有效的方法是结合起来......

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

然后我将 TouchableOpacity 包裹在一个视图中。

之前：

<TouchableOpacity onPress={()=> addCallback()}
    style={styles.addButtonHolder}
> 
    <PlusCircle style={styles.addButton} width={70} height={70} stroke={"white"} strokeWidth={3}/>
</TouchableOpacity>

之后：

<View style={styles.addButtonHolder}>
    <TouchableOpacity onPress={()=> addCallback()}> 
        <PlusCircle style={styles.addButton} width={70} height={70} stroke={"white"} strokeWidth={3}/>
    </TouchableOpacity>
</View>

样式表：

const styles = StyleSheet.create({

    addButtonHolder: {
        position: 'absolute',
        bottom: 70,
        right: 10,
        justifyContent: 'center', 
        alignItems: 'center',
        zIndex: 1,
    },
    addButton: {
        backgroundColor: '#b4cffa',
        borderRadius: 35
    }
})

Answer 4

对我来说，它的工作原理是：

从 'react-native' 导入 { TouchableOpacity }；

onPress，zIndex：1，位置：'绝对'

Answer 5

伙计，我花了很长时间才弄清楚为什么会发生这种情况。 我在这里测试了很多解决方案。有两件事起作用：

• The first answer here
• 第二种是在包装容器上添加elevation和zIndex

<View style={{  zIndex:0 }>
 ...
 <View style={{ position: 'absulote', zIndex:10 ,elevation: 10 }}>
    <TouchableHighLight><Text>Click me</Text></TouchableHighlight>
 </View>
 <View> .... </View>
 ...
</View>

如果我是对的，原因是即使显示了按钮，Android 也会以不同的方式处理 Press 事件的层，您需要为其余组件设置低级别。为你的 wrapper 组件定义一个较低的级别，它所有没有这个属性的子组件将自动从父组件继承。

Answer 6

当位置是绝对位置时，TouchableHighlight 或 TouchableOpacity 会从表面下方。您必须为容器添加更高的 zIndex 值。

Answer 7

使用 zIndex: 1 在视图中，它会起作用的。

<View style={{position : 'absolute', marginTop : 25, zIndex: 1}}>

更多细节可以在这里找到：

How to use zIndex in react-native

Answer 8

此道具有助于禁用 ScrollView 以捕捉所有触摸并让子句柄

 keyboardShouldPersistTaps='always'

• 'always'，键盘不会自动关闭，滚动视图不会捕捉点击，但滚动视图的子视图可以捕捉点击。
• 'handled'，当点击被滚动视图的子级处理（或被祖先捕获）时，键盘不会自动关闭。

https://reactnative.dev/docs/scrollview#keyboardshouldpersisttaps

Answer 9

这对我有用

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

并将 onPress 更改为 onPressIn

<TouchableOpacity onPressIn={() => console.log('clicked')}></TouchableOpacity>

Answer 10

已解决：

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

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

之前：

import {TouchableOpacity} from "react-native";

之后：

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

Answer 11

我的解决方案是：

style:{
    zIndex: 1,
    position: 'absolute',
 }

Answer 12

使用 onPressIn 代替 onPress

这使得该区域可点击！

Answer 13

我在绝对视图中使用了TouchableOpacity。 onPress 函数按下后没有被调用。但是不透明度发生了变化。我已经尝试了上述所有解决方案，但都没有奏效。

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

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

Answer 14

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 15

解决方案是更改组件的顺序。

我最初拥有的：

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

这是修复：

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