React Native：在 Android 上，仍然可以点击被位置绝对视图覆盖的按钮

Question

场景： 我有一个红色、绿色和蓝色的盒子，每个盒子里面都有一个可以触摸的黄色盒子。红色和蓝色拳击手是兄弟姐妹。绿色框是红色框的子项并且是 position: absolute 所以它是重叠的。在绿色框（即红色框）的父级上使用 zIndex 我设法将绿色框覆盖在红色和蓝色框上。每个可触摸对象在按下时记录其父对象的颜色。

[这是 Android 唯一的问题]

问题： 在绿框上点击 touchable，在绿色与蓝色重叠的区域，点击蓝框而不是绿框，尽管绿色在上面。

预期行为：绿色方框在顶部，因此应点击它。

截图： https://i.ibb.co/PgBsHmn/android-issue-with-position-absolute.png

小吃： https://snack.expo.io/@bgcodes/absolute-position-issue-on-android

代码：

import { View, TouchableOpacity, StyleSheet, Text } from 'react-native';

const App = () => {
return (
  <View style={styles.container}>
    <View style={styles.red}>
      <TouchableOpacity onPress={()=>console.log('red')}>
        <View style={styles.yellow} />
      </TouchableOpacity>
      <View style={styles.green}>
        <TouchableOpacity onPress={()=>console.log('green')}>
          <View style={styles.yellow} />
        </TouchableOpacity>
      </View>
    </View>
    <View style={styles.blue}>
      <TouchableOpacity onPress={()=>console.log('blue')}>
        <View style={styles.yellow} />
      </TouchableOpacity>
    </View>
  </View>
)}

export default App;

const styles=StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
  },
  yellow: {
    height: 90,
    width: 90,
    backgroundColor: 'yellow',
  },
  red: {
    justifyContent: 'center',
    alignItems: 'center',
    height: 100,
    width: 100,
    backgroundColor: 'red',
    zIndex: 5,
  },
  green: {
    justifyContent: 'center',
    alignItems: 'center',
    height: 100,
    width: 100,
    backgroundColor: 'green',
    position: 'absolute',
    left: 30,
    top: 50,
  },
  blue: {
    justifyContent: 'center',
    alignItems: 'center',
    height: 100,
    width: 100,
    backgroundColor: 'blue',
    zIndex: 1,
  },
});

任何帮助将不胜感激

Answer 1

我觉得应该不错:

import React from 'react';
import { View, TouchableOpacity, StyleSheet, Text } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <View style={styles.red}>
        <TouchableOpacity
          onPress={() => console.log('red')}
          style={styles.yellow}
        />
      </View>
      <View style={styles.green}>
        <TouchableOpacity
          onPress={() => console.log('green')}
          style={styles.yellow}
        />
      </View>
      <View style={styles.blue}>
        <TouchableOpacity
          onPress={() => console.log('blue')}
          style={styles.yellow}
        />
      </View>
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
  },
  yellow: {
    height: 90,
    width: 90,
    backgroundColor: 'yellow',
  },
  red: {
    justifyContent: 'center',
    alignItems: 'center',
    height: 100,
    width: 100,
    backgroundColor: 'red',
    zIndex: 5,
  },
  green: {
    justifyContent: 'center',
    alignItems: 'center',
    height: 100,
    width: 100,
    backgroundColor: 'green',
    position: 'absolute',
    left: 170,
    zIndex: 6,
  },
  blue: {
    justifyContent: 'center',
    alignItems: 'center',
    height: 100,
    width: 100,
    backgroundColor: 'blue',
    zIndex: 1,
  },
});

Answer 2

渲染对于您的功能来说很棘手。类似的东西应该可以工作（伪代码）

现在，您的代码如下所示：

<RedSquareComponent />
<GreenSquare />
<BlueSquare />

为了让绿色方块在蓝色方块之上，只需将两者调换即可。

<RedSquareComponent />
<BlueSquare />
<GreenSquare />

这是零食：

https://snack.expo.io/@sportelli/absolute-position-issue-on-android

Answer 3

好的，作为一种解决方法，您可以从 'react-native-gesture-handler' 导入 TouchableOpacity，它工作正常。但是使用 TextInput 时问题仍然存在。即，如果在重叠的绿色框下方有一个 TextInput（而不是蓝色框），则按绿色框将聚焦于 TextInput。

编辑：TextInput 的解决方法。您可以在 TextInput 上使用 pointerEvents 属性来忽略触摸事件。

<TextInput pointerEvents={isOverlapped ? 'none' : 'auto'} />

React Native：在 Android 上，仍然可以点击被位置绝对视图覆盖的按钮

React Native: On Android, a button covered by position absolute view can still be tapped

android

z-index

absolute

react-native