反应原生绝对定位答案

【问题标题】：React native absolute positioning反应原生绝对定位
【发布时间】：2020-10-28 23:59:37
【问题描述】：

render() {
    return (
      <View style={{position: 'absolute'}}>
        <View style={{top: 50, width:50, height: 50, backgroundColor:'green'}} ></View>
        <View style={{top: 50, width:50, height: 50, backgroundColor:'blue'}} ></View>
        <View style={{top: 50, width:50, height: 50, backgroundColor:'purple'}} ></View>
      </View>
    );
  }

由于我使用的是绝对定位，因此我希望三个正方形位于彼此顶部的同一位置。但我得到的是：

我可以在没有任何自动布局的情况下将三个方块准确定位到我要求它们的位置吗？

【问题讨论】：

标签： css react-native layout css-position absolute

【解决方案1】：

问题是您的父视图是绝对定位的，但随后每个子视图会自动布置在所述父视图内。您应该对需要定位的每个元素应用绝对定位。

<View>
    <View style={{position: 'absolute', top: 50, width:50, height: 50, backgroundColor:'green'}} ></View>
    <View style={{position: 'absolute', top: 50, width:50, height: 50, backgroundColor:'blue'}} ></View>
    <View style={{position: 'absolute', top: 50, width:50, height: 50, backgroundColor:'purple'}} ></View>
</View>

【讨论】：

【解决方案2】：

您做错了，您需要将position:absolute 应用于每个方格

试试这个：

<View>
    <View style={{top: 50, width:50, height: 50, position: 'absolute',backgroundColor:'green'}} ></View>
    <View style={{top: 50, width:50, height: 50,position: 'absolute', backgroundColor:'blue'}} ></View>
    <View style={{top: 50, width:50, height: 50, position: 'absolute',backgroundColor:'purple'}} ></View>
  </View>

【讨论】：

【解决方案3】：

是的，你可以，你必须让它们中的每一个都处于绝对位置。

<View>
    <View style={{position: 'absolute', top: 50, width:50, height: 50, backgroundColor:'green'}} ></View>
    <View style={{position: 'absolute', top: 50, width:50, height: 50, backgroundColor:'blue'}} ></View>
    <View style={{position: 'absolute', top: 50, width:50, height: 50, backgroundColor:'purple'}} ></View>
</View>

【讨论】：