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

【问题标题】：React Native - Bring bottom image to top layerReact Native - 将底部图像带到顶层
【发布时间】：2021-07-22 05:13:01
【问题描述】：

我有一个如下所示的自定义设计：

我想在三个条纹上叠加一个“X”标记。当我做绝对定位时，它有效，但仅适用于它包含在 / 它被切断的位置。如何将“X”叠加在下面的所有 's 之上？

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

【问题讨论】：

标签： css react-native flexbox css-position react-native-stylesheet

【解决方案1】：

您可以将 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>

这就是结果

【讨论】：

【解决方案2】：

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

【讨论】：