私が達成しようとしていますどのような同じ要素

Question

重複：

私はこの問題を解決しようとする上で立ち往生していますが。リスト内の位置に基づいて異なるスタイルを定義するか、すべてのアイテムに同じスタイルを適用することでこれを解決することができますか？もしそうなら、どうすればよいでしょうか？

Answer 1

要素のクラスを定義するだけで、指定されたサイズのdisplay: inline-blockを1行で表示し、負の右マージンを重ねて表示できます。

以下は、問題を解決するためのプレーンな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

我々はフレックス方向に列を持っている場合ので、あなたはすべての要素に同じスタイルを使用することができます。「行」、最初の要素は行の先頭に配置されます。

マイナスの余白は使用しないでください。それは可能IOSで動作しません。

次に、反応ネイティブでは、すべての次の要素が前の要素になることに注意してください。だから、あなたがすべき唯一のことは、小さなブロック内に画像を配置することです。