Question

我试图在下面的绿色方块上放一个白点。

但无论我如何尝试，我仍然会得到这个。白点的背景颜色和边距消失了。

这是代码。

<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>

Answer 1

我认为您不需要/想要使用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

Answer 2

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

试试这个。你不应该嵌套它们，因为它们作为父母和孩子彼此相关。顺便说一下，您可能需要使用flex来正确对齐它们：）

反应原生视图层

2 个答案: