React Native - 将底部图像带到顶层

Question

我有一个看起来像这样的定制设计：

而且我想要在三条纹之上分层放置“X”标记。当我做绝对定位时它有效但只适用于它包含在 /it 中的它被切断。我怎样才能将“X”叠加在下面所有的之上？

    <View style={styles.lightGrey}>
      <View style={styles.red}>
        <View style={styles.yellow}>
          <View style={styles.teal}>
            {!preview && (
              <TouchableOpacity
                onPress={async () => {
                  setIsLoadingDISLiked(true);
                  await onDisliked();
                  setIsLoadingDISLiked(false);
                }}
              >
                <MaterialCommunityIcons
                  name="close-thick"
                  size={34}
                  color="black"
                  style={{
                    marginLeft: Constant.width * 0.65,
                    marginTop: Constant.height * 0.01,
                    position: "absolute",
                  }}
                />
              </TouchableOpacity>
            )}
          </View>

造型

  red: {
    height: Constant.height * 0.08,
    width: Constant.width,
    backgroundColor: Colors.Brick,
  },
  yellow: {
    height: Constant.height * 0.08,
    width: Constant.width * 0.75,
    backgroundColor: Colors.LightMustardYellow,
  },
  teal: {
    height: Constant.height * 0.08,
    width: Constant.width * 0.7,
    backgroundColor: Colors.Teal,
  },
  lightGrey: {
    backgroundColor: Colors.LightLightGrey,
    paddingBottom: 100,
  },

Answer 1

您可以使用 z-index（'zIndex' 在 react-native 中）来选择哪个元素放在您想要的图层上。 css 指南：https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Answer 2

您可以将 x 图标放在主视图容器下作为 最后一项 和 position : 'absolute'

您的代码可能是这样的，请参阅 expo snack

中的代码


<View style={{flex : 1}}>

        <View style={{backgroundColor : '#ddd', height : 100}}>
            <View style={{backgroundColor : '#bbb', flex : 1, margin : 20}}>
                <View style={{backgroundColor : '#999', flex : 1, margin : 20}}>
                    <View style={{backgroundColor : '#666', flex : 1, margin : 20}}>

                    </View>
                </View>
            </View>
        </View>

        //put icon x here at last item in main container
        <View style={{
            position : 'absolute',
            top : 10, right : 10, height : 30,
            width : 30,
            backgroundColor : '#f00',
        }}>
            <Text style={{color : '#fff', alignSelf : "center", fontSize : 20}}>x</Text>
        </View>

    </View>

这是结果

React Native - 将底部图像带到顶层

React Native - Bring bottom image to top layer

css

css-position

flexbox

react-native

react-native-stylesheet