反應原生絕對定位

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

由於我使用的是絕對定位，因此我希望三個正方形彼此重疊放置在同一個位置。 但我得到的是：

我可以在沒有任何自動布局的情況下將三個方塊准確定位在我要求它們的位置嗎？

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

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

Answer 3

問題是您的父視圖是絕對定位的，但是每個子視圖都會自動在所述父視圖中布局。 您應該對 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>