重叠相同的元素

Question

我想要实现的目标：

我坚持试图解决这个问题。我应该根据列表中的位置定义不同的样式，还是可以通过为所有项目设置相同的样式来解决这个问题，如果是这样，我将如何解决这个问题？

Answer 1

您可以简单地定义一个具有指定大小的元素类，display: inline-block显示在一行中，负右边距重叠。

以下是解决您的问题的简单HTML / CSS示例。当然，您必须将其移植到React Native应用程序中。

.a {
  display: inline-block;
  height: 50px;
  width: 50px;
  margin-right: -20px;
  background: gray;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 8px 15px #999;
}

<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>

Answer 2

最简单（不是最好的方式）就是这样的。 如果您使用预处理器，则可以编写此DRYer。

ul {
  padding: 20px 0;
  list-style: none;
  clear: both;
 }
 
 .item {
   float: left;
   position: relative;
 }
 
 .item img { 
   border-radius: 50%;
   overflow: hidden;
   position: relative;
 }
 
.item:nth-child(1) img {
  background: #aaa;
   border-radius: 50%;
 }
 
.item:nth-child(2) img {
  background: #bbb;
   left: -20px;
 }
 
.item:nth-child(3) img {
  background: #ccc;
   left: -40px;
 }
 
.item:nth-child(4) img {
  background: #ddd;
  left: -60px;
 }

<ul>
  <li class="item"><img src="" width="50" height="50"></li>  
  <li class="item"><img src="" width="50" height="50"></li>  
  <li class="item"><img src="" width="50" height="50"></li>
  <li class="item"><img src="" width="50" height="50"></li>
</ul>

Answer 3

你可以对所有元素使用相同的样式，因为当我们有flex-direction的行时：'row'，第一个元素将放在row的开头。

不要使用负边距！它可能不适用于IOS。

接下来，您应该记住，在react-native中，每个下一个元素都将超过前一个元素。所以你唯一应该做的就是在小块内进行图像定位。