反应原生视图层

我试图把白色圆点放在下方的绿色方块上。反应原生视图层

但无论我如何努力我仍然得到这一点。白点的背景颜色和边距消失了。

下面的代码。

<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

反应原生视图层

回答

相关问题