ReactNative 绝对坐标absolute和相对坐标relative

绝对坐标absolute

  • 相对于父节点的4个角落,通过left、right、top、bottom来调整相对于父窗口的坐标
<View style={[styles.circle, {position: 'absolute', bottom: 0, right: 0}]} />
右下角
  • 当left、right同时存在时,left会覆盖right的属性
    同理top和bottom同时存在时,top会覆盖bottom的坐标属性

  • 绝对坐标是相对于父节点的,而不是相对于根节点的

<View style={{flex: 1, backgroundColor: 'gray'}}>
    <View style={{height: 100, backgroundColor: 'green'}}>
        <View style={[styles.circle, {position: 'absolute', bottom: 0, right: 0}]}/>
    </View>
</View>
Paste_Image.png

相对坐标relative

  • relative坐标是默认坐标,position: 'relative'默认是添加的
<View style={{ flex: 1, backgroundColor: 'gray' }}>
    <View style={{ height: 100, backgroundColor: 'green'}}>
          <View style={[styles.circle, {position: 'relative', left: 0, top: 0 }]} />
          <View style={[styles.circle, {position: 'relative', left: 0, top: 0 }]} />
    </View>
</View>
Paste_Image.png

relative理解还不到位,用到的大都是left+top,以后补充

参考文章:
http://www.infoq.com/cn/articles/react-native-layout/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 9,644评论 0 8
  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 3,195评论 0 11
  • 一条水路长又长 两瓶啤酒没喝光 他年你若来南站 再续三杯作补偿
    PAOXIAO阅读 256评论 3 1
  • 一个人在走不尽的小路漫步 一个人在夜的最深处仰望繁星 一个人开始一本书的思旅 一个人搭乘一辆不知终点的车 一个人默...
    温丽明阅读 235评论 0 2
  • 天消暑气晴明转,凉意绵绵飞入庭。 雨雾树旗风飒飒,云楼日影色青青。 新荷旧柳良人远,小院空阶寂寞冥。 踏遍江南君未...
    迷蝴庄生阅读 566评论 0 7