React Native - 大于父组件的子组件上的 onPress 无法在 Android 上工作

Question

我在 React Native 中有以下组件：

<View style={{ flex: 1, width: "100%", backgroundColor: "white" }} >
    <View style={{ position: "absolute", top: 20, left: 20, height: 100, width: 100, backgroundColor: 'red' }}>
        <TouchableWithoutFeedback onPress={() => console.log("clicked")}>
            <View style={{ position: "absolute", top: 20, left: 20, height: 200, width: 200, backgroundColor: 'blue'}}>
            </View>
        </TouchableWithoutFeedback>
    </View>
</View>

这会呈现以下屏幕：

Render of component

现在，当我单击父（红色）组件之外的子（蓝色）组件部分时，它不会在 Android 上记录“单击”。但是当我运行这个应用程序在 iOS 上时，当在父组件之外点击子组件时它会记录“点击”。

它在 iOS 上有效但在 Android 上无效的原因是什么？我应该专门为 Android 使用不同的组件吗？

提前致谢。

版本信息：

react-native 信息的输出：

System:
    OS: macOS 12.0.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 157.67 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.10.0 - /var/folders/0k/l1gbyzj91lzg98pqcyp95xl40000gn/T/yarn--1653119182599-0.2342745454309867/node
    Yarn: 1.22.18 - /var/folders/0k/l1gbyzj91lzg98pqcyp95xl40000gn/T/yarn--1653119182599-0.2342745454309867/yarn
    npm: 7.24.0 - ~/.nvm/versions/node/v16.10.0/bin/npm
    Watchman: 2022.03.21.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3
    Android SDK: Not Found
  IDEs:
    Android Studio: 2020.3 AI-203.7717.56.2031.7784292
    Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild
  Languages:
    Java: 15.0.2 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.1 => 17.0.1 
    react-native: 0.64.3 => 0.64.3 
    react-native-macos: Not Found

Answer 1

这是 Android 设备的普遍问题，此问题尚未解决。您会发现关于此 here on Github.

的长期公开讨论

然而，这可以通过不让父容器处理其子容器的定位并自己使用绝对定位来解决，无论如何你都在做。因此，每个绝对定位的容器不应包含在同一个父视图中。

以下解决了 Android 上的问题，同时仍在 iOS 上工作。

<>
  <View style={{  width: "100%", backgroundColor: "white" }} >
    <View style={{ position: "absolute", top: 20, left: 20, height: 100, width: 100, backgroundColor: 'red' }}></View>
  </View>
  <TouchableWithoutFeedback onPress={() => console.log("clicked")}>
    <View style={{ position: "absolute", top: 40, left: 40, height: 200, width: 200, backgroundColor: 'blue'}}></View>
  </TouchableWithoutFeedback>
</>

注意，我已经通过调整其位置创建了所需的蓝色和红色分量重叠。触摸事件现在在 Android 上按预期工作。我仅在物理设备上对此进行了测试（Android 和 iOS）。

React Native - 大于父组件的子组件上的 onPress 无法在 Android 上工作

React Native - onPress on child larger than parent component not working on Android

javascript

mobile

android

ios

react-native