反应原生视图层答案

【问题标题】：React native view layer反应原生视图层
【发布时间】：2016-09-03 20:32:14
【问题描述】：

我正在尝试在如下所示的绿色方块上放置一个白点。

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

这是代码。

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

【问题讨论】：

标签： reactjs react-native flexbox

【解决方案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

【讨论】：

syles.holder 无法使用。

【解决方案2】：

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

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

【讨论】：