Pressable 在本机 android 中不起作用

Question

描述

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

反应本机版本：

0.63.2

重现步骤

1. 开一家新的世博小吃
2. 创建一个可压组件，该组件是其他组件（文本或图像）的父组件
3. 设置 onPress 属性来调用具有视觉效果的函数。（就像警报一样）
4. 切换到 android 选项卡，然后单击“点击即可播放”

预期成绩

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

小吃、代码示例、屏幕截图或存储库链接：

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>