android - React Native : On Android, 被位置绝对 View 覆盖的按钮仍然可以点击

Question

场景: 我有一个红色、绿色和蓝色的盒子，每个盒子里面都有一个可触摸的黄色盒子。红色和蓝色拳击手是 sibling 。绿色框是红色框的子元素，并且position:absolute，因此它是重叠的。在绿色框(即红色框)的父级上使用 zIndex，我设法将绿色框覆盖在红色和蓝色框上。每个可触摸对象在按下时都会记录其父对象的颜色。

[这是仅限 Android 的问题]

问题: 在绿色与蓝色重叠的区域中点击绿色框上的可触摸部分，尽管绿色在顶部，但点击的是蓝色框而不是绿色框。

预期行为:应点击绿色框，因为它位于顶部。

屏幕截图: 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

好吧，作为一种解决方法，您可以从“react-native-gesture-handler”导入 TouchableOpacity，并且效果很好。 但使用 TextInput 时问题仍然存在。即，如果重叠的绿色框下方有一个 TextInput(而不是蓝色框)，则按绿色框将聚焦在 TextInput 上。

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

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