ネイティブビューレイヤーに反応する

Question

私は以下のような緑色の四角の上に白い点を置こうとしています。

しかし、私は、私はまだこれを取得しようとどんなに。白い点の背景色と余白はなくなりました。

ここではコードです。

<View style={backgroundColor: 'white', zIndex: 1, margin: 2, borderRadius: 10, borderWidth: 2} > 
    <View style={backgroundColor: 'green', zIndex: 0} /> 
</View> 

私の問題は解決しますが、そうではありません。私も注文を交換しようとしましたが、それは私に平野の緑の広場を与えます。助けて？

<View style={backgroundColor: 'green', zIndex: 0}> 
    <View style={backgroundColor: 'white', zIndex: 1, margin: 2, borderRadius: 10, borderWidth: 2} /> 
</View> 

Answer 1

これはz-indexを使用する必要はありません。 z-indexは、同じスペースを占めるアイテムをレイヤーするために、深度に使用されます。

はここにアップ読む： CSS Tricks - z-index

あなたがすべて揃っを維持しようとしている場合、私はあなたがフレックスボックスを利用したいことに同意したいです。ここで

は例です：

<View style={styles.container}> 

    <View style={styles.holder}> 
     <View style={styles.circleHolder}> 
      <View style={styles.circle} /> 
     </View> 
     <View style={styles.square} /> 
    </View> 

</View> 

とスタイリング：

var styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     justifyContent: 'center', 
     alignItems: 'center' 
    }, 
    circleHolder: { 
     width: 200, 
     height: 200, 
     justifyContent: 'center', 
     alignItems: 'center' 
    }, 
    circle: { 
     backgroundColor: 'white', 
     width: 150, 
     height: 150, 
     borderRadius: 75, 
     borderWidth: 2 
    }, 
    square: { 
     backgroundColor: 'green', 
     width: 200, 
     height: 200, 
    }, 
}); 

はRNPlay：https://rnplay.org/apps/k5DbDQ

Answer 2

<View> 
    <View style={ 
    backgroundColor: 'white', 
    zIndex: 1, 
    margin: 2, 
    borderRadius: 10, 
    borderWidth: 2 
    }/> 
    <View style={backgroundColor: 'green', zIndex: 0}/> 
</View> 

これを試してみてください。彼らは親と子として互いに関連しているので、それらを入れ子にするべきではありません。ちなみにflexを使って正しく整列させる必要があるかもしれません:)