Question

场景： 我有一个红色、绿色和蓝色的盒子，每个盒子里面都有一个可触摸的黄色盒子。红色和蓝色拳击手是兄弟姐妹。 Green box 是 red box 的子项，并且是 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

我觉得应该不错：

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（而不是蓝色框），按下 greenbox 将聚焦在 TextInput 上。

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

3 个答案: