Pressable 在 react-native 中不起作用 android

Question

描述

当可按下组件的子组件（例如图像）被按下时，传递给 onPress 属性的函数不会在 android 上执行。在 iOS.

上按预期工作

React Native 版本：

0.63.2

重现步骤

1. 开新世博小吃
2. 创建一个作为其他组件（文本或图像）父级的 Pressable 组件
3. 设置onPress 属性来调用具有视觉效果的函数。 （像一个警报）
4. 切换到 android 选项卡，然后单击 'Tap to play'

预期结果

调用函数并触发效果（警报）

快餐、代码示例、屏幕截图或 link 存储库：

https://snack.expo.io/@razorshnegax/6c7be3

代码示例：

import React from 'react';
import { View, Pressable, Image, Alert } from 'react-native';

export default class Index extends React.Component {
  render() {
    // The onPress function fires in iOS, but not android
    return (
      <View>
        <Pressable onPress={() => {Alert.alert("Yeep")}}>
          <Image source={require('./greatknight.png')} style={{
            // So that the image is more centered
            top: 100,
            left: 100
          }}/>
        </Pressable>
      </View>
    );
  }
}

Answer 1

由于样式的原因，Pressable 组件没有放在 Image 后面。 您可以通过向 Pressable 组件添加颜色来看到这一点。

解决此问题的方法是设置 Pressable 组件的样式，使图像组件对齐并使事件冒泡。

我不确定为什么事件没有在 Android 上冒泡，因为它应该基于组件层次结构。

Answer 2

在我的例子中，添加了 zindex 来解决这个问题。这部作品连摸也

<Pressable   onPress={() => alert()}  style={{zIndex: 0.5, }}>
*****
</Pressable>