如何在 React Native 中模拟不传递 zIndex？ (A > B > C > A)

Question

我正在尝试创建这种效果，可以在 Spotify UI 中找到：

好像有以下几个组件：

• 家长

  <View>

  （黑色）

• 孩子

  <View>

  （粉红色）

• <Text>

• <Image>

问题是，他们如何使这项工作在 zIndex 方面有效？

• 父级

  <View>

  出现在

  <Image>

  上方 - “P > I”

• <Image>

  出现在孩子上方

  <View>

  - “I > C”

• 子项

  <View>

  出现在父项

  <View>

  上方 - “C > P”

这使得我们有 P > I > C > P，所以 P > P 这对于普通数字是不可能的，就像 zIndex 设置的那样。这种属性称为“不及物性”，出现在“剪刀石头布”游戏中，其中 R > S > P > R。 尽管如此，Spotify 还是设法实现了这一目标。有人知道如何实现这一目标吗？

也许 React Native 使用特定于层次结构的 zIndex 而不是全局 zIndex 的事实可能会有所帮助？

Answer 1

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

const MusicCard = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Muzyka</Text>
      <Image
        source={{ uri: 'https://path-to-your-image.png' }} // replace with your image path
        style={styles.image}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#d21b78', // pink background color
    padding: 20,
    borderRadius: 10,
    margin: 20,
    height: 200,
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    position: 'relative',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#fff',
  },
  image: {
    width: 100,
    height: 150,
    position: 'absolute',
    bottom: 10,
    right: 10,
    transform: [{ rotate: '-10deg' }],
  },
});

export default MusicCard;