如何获得重叠视图（如这张所附照片中圈出的视图）？

Question

我尝试使用绝对位置，但无法使用，请点击查看图片 Overlapping image views您也可以在下面看到我的代码。

<View style={{ justifyContent: 'flex-end', flexDirection: 'row' }}>
          <View style={{ height: 20, width: 20, borderRadius: 30, backgroundColor: 'grey', justifyContent: 'center', borderWidth: 0.5, borderColor: 'white' }}>
            <Image
              source={{ uri: item.image }}
              style={{ height: 20, width: 20, borderRadius: 10 }}
            />
          </View>
          <View style={{ height: 20, width: 20, borderRadius: 30, backgroundColor: 'grey', justifyContent: 'center', borderWidth: 0.5, borderColor: 'white' }}>
            <Image
              source={{ uri: item.image }}
              style={{ height: 20, width: 20, borderRadius: 10 }}
            />
          </View>
          <View style={{ height: 20, width: 20, borderRadius: 30, backgroundColor: 'grey', justifyContent: 'center', borderWidth: 0.5, borderColor: 'white' }}>
            <Image
              source={{ uri: item.image }}
              style={{ height: 20, width: 20, borderRadius: 10 }}
            />
          </View>
        </View>

result of using negative margin

Answer 1

解决方案是对第二张和第三张图像使用负的左边距，并按所需的分层顺序设置z-index属性。