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

我的解决方法是：

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

Answer 5

使用 zIndex: 1可以使用。

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

更多详细信息可以在这里找到：

How to use zIndex in react-native

Answer 6

这对我有用

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

并将onPress更改为onPressIn

__annotations__

Answer 7

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

对我来说，有效的是综合....

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 8

尝试所有两个小时后，我发现的解决方案是更改按钮位置。

之前...

  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 9

我在绝对视图中使用了TouchableOpacity。按下onPress函数后未调用它。但是不透明度改变了。我已经尝试了上述所有解决方案，但均无效果。

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

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

Answer 10

使用onPressIn代替onPress

这使该区域可点击！

Answer 11

此道具可帮助禁用 ScrollView 来捕获所有触摸并让子句柄

 keyboardShouldPersistTaps='always'

“始终”，键盘不会自动关闭，滚动视图也不会捕获水龙头，但是滚动视图的子级可以捕获水龙头。
“已处理”，当滚动视图的子级（或由祖先捕获）点击时，键盘不会自动关闭。

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

Answer 12

当位置为绝对时，TouchableHighlight或TouchableOpacity从表面下方进入。您必须向Container添加更高的zIndex值。

Answer 13

他，我花了很长时间才弄清楚为什么会这样。我在这里测试了很多解决方案。有两件事起作用：

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事件的各层处理方式有所不同，您需要为其余组件设置一个较低的级别。为包装器组件定义一个较低的级别，所有不具有此属性的子代都会自动从父代继承。

Answer 14

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

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

onPress，zIndex：1，位置：“绝对”

Answer 15

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

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

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

15 个答案: