首页 > 解决方案 > 反应原生绝对定位

问题描述

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

由于我使用的是绝对定位,因此我希望三个正方形彼此重叠放置在同一个位置。但我得到的是:

在此处输入图像描述

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

标签: cssreact-nativelayoutcss-positionabsolute

解决方案


是的,您可以,您必须使它们中的每一个都处于绝对位置。

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

推荐阅读