react-native - 在 React Native 中将绝对位置 View 带到前面

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,
    },

我什至之前尝试过放置这些代码行。我认为这是因为 Prop 没有加载并且 View 被渲染。那么，有什么想法吗？

创建了这个快速小吃(仅在 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
},

在您的徽章 View 中使用此样式希望这对您有用:) 发生这种情况是因为您已经在图像中使用了海拔，因此如果您想在其顶部显示其他 View ，那么您必须设置比 ImageView 更高的海拔