反應原生視圖層

我試圖把白色圓點放在下方的綠色方塊上。反應原生視圖層

但無論我如何努力我仍然得到這一點。白點的背景顏色和邊距消失了。

下面的代碼。

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

雖然zIndex會解決我的問題，但它不會。我也嘗試交換訂單，但它只是給我一個普通的綠色方塊。幫幫我？

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

來源

2016-09-02 Dan

我不認爲你需要/想要使用z-index這一點。 z-index用於深度，以覆蓋佔據相同空間的項目。

閱讀上在這裏：CSS Tricks - z-index

我同意你想利用Flexbox的，如果你試圖把一切都對齊。

下面是一個例子：

<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

來源

2016-09-03 12:32:14 Mike

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

試試這個。你不應該嵌套它們，因爲它們作爲父母和孩子彼此相關。順便說一句，你可能需要使用flex來正確對齊:)

來源

2016-09-02 12:23:19

反應原生視圖層

回答

相關問題