反应原生绝对定位

Question

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>
    );
  }

Since I am using absolute positioning, I expected the three squares to be positioned in the very same spot on top of each other. But what I get is this:

Can I get the three squares to be positioned exactly where I asked them without any auto layout?

Answer 1

Yes you can, you have to make each one of them absolutely positioned.

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

Answer 2

you were doing it wrong you need to apply position:absolute to each square

Try this:

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

Answer 3

The problem is that your parent view is being positioned absolutely but then each child is laid out automatically within said parent. You should apply absolute positioning to each element that you need to position.

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