在本机反应中将绝对位置放在前面

Question

这在 Android 上发生，在 iOS 上运行正常。我有一个带有徽章的组件，也是我定制的。

function HomeMenuCell({ title, imagePath, pressEvent, showBadge, badgeText }) {
    return (
        <TouchableOpacity style={styles.container} onPress={pressEvent}>
            <View style={styles.imageView}>
                <Image source={imagePath} />
            </View>
            <Text style={styles.titleText}>{title}</Text>
            {showBadge && <View style={styles.badgeView}>
                <Text style={styles.badgeText}>{badgeText}</Text>
            </View>}
        </TouchableOpacity>
    );
}

我有一个 TouchableOpacity 组件，在这个容器中，我正在做所有事情。 badgeView 也是基于 container

定位的

    container: {
        justifyContent: 'center',
        alignItems: 'center',
        marginBottom: 10,
        marginTop: 10,
        marginRight: 10,
        marginLeft: 20
    },
    badgeView: {
        position: 'absolute',
        backgroundColor: 'pink',
        borderRadius: 8,
        padding: 3,
        // zInndex: 999, //This doesn't work
        right: 0,
        top: 0
    },

但是隐藏在imageView

后面

    imageView: {
        width: 50, height: 50,
        shadowOffset: { width: 0, height: 0 },
        shadowColor: 'black',
        shadowOpacity: 0.2,
        elevation: 3,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 8,
    },

我什至试过把那些代码行放在前面。我认为这是因为没有加载道具并且渲染了视图。那么，有什么想法吗？

创建了这个快餐（只在 Android 中看到）：https://snack.expo.io/@chtalha/badge-on-view

Answer 1

   badgeView: {
    position: 'absolute',
    backgroundColor: 'red',
    borderRadius: 8,
    padding: 3,
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
    right: -15,
    top: -5
},

在你的 badgeView 中使用这种风格希望这对你有用:) 发生这种情况是因为您已经在图像中使用了高程，所以如果您想在它上面显示其他视图，那么您必须设置比图像视图更高的高程

在本机反应中将绝对位置放在前面

Bring a view on absolute position to front in react native

z-index

stylesheet

react-native