react-native 布局篇之position

Lemon_95 发布于2019-08-20 18:11 / 947人阅读

摘要：先简单的看一下示例图相对布局。这个是相对于父容器进行据对布局。绝对布局是脱离文档流的，不过奇怪的是依旧在文档层次结构里面，这个和的也很大不一样。

position布局

position:enum("absolute","relative")。先简单的看一下示例图

position:"relative"
相对布局。这个和html的position有很大的不同，他的相对布局不是相对于父容器，而是相对于兄弟节点。

position:"absolute"
绝对布局。这个是相对于父容器进行据对布局。绝对布局是脱离文档流的，不过奇怪的是依旧在文档层次结构里面，这个和html的position也很大不一样。另外还有一个和html不一样的是，html中position:absolute要求父容器的position必须是absolute或者relative，如果第一层父容器position不是absolute或者relative，在html会依次向上递归查询直到找到为止，然后居于找到的父容器绝对定位。

position 示例代码

/**
 * Created by GXZ on 16/6/27.
 */
import React,{Component} from "react";
import {
    Text,
    View,
    ScrollView
} from "react-native";

export default class PositionExample extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            
                
                    FlexBox布局
                    
                        
                        
                        
                    
                    position=relative,top:20
                    
                        
                        
                        
                    
                    position=absolute,top:20
                    
                        
                        
                        
                    
                
            
        );
    }
}

const styles = {
    container: {
        height: 180,
        backgroundColor: "#CCCCCC",
        marginBottom: 10,
    },
    box1: {
        width: 50,
        height: 50,
        backgroundColor: "#FF0000"
    },
    box2: {
        width: 50,
        height: 50,
        backgroundColor: "#00FF00"
    },
    box3: {
        width: 50,
        height: 50,
        backgroundColor: "#0000FF"
    }
};

云服务器 GPU云服务器 react-native React-Native版Mung position() positioning

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84165.html

react-native 布局篇之flexbox

摘要：布局直接阅读大神文章阮一峰写的布局。有几个注意的点，我在刚刚开始中总结的容器属性，，布局方式主轴对齐方式交叉轴对齐方式这里需要特别注意的就是主轴和交叉轴。特别注意的作用对象是主轴在中设置是水平方向上占满整个容器。 FlexBox布局直接阅读大神文章：阮一峰写的FlexBox布局。在react-native中原理是一样的，只不过可能有写属性在react-native中简化了。有几个注意...

Near_Li 2019-08-20 18:11 评论0 收藏0
css篇之absolute绝对定位元素居中技巧

摘要：一般地，居中绝对定位元素，再负值或者通过也可达到效果。今天发现另一个技巧，利用，取值，再即可实现居中。原因注子元素大的话，上下可居中，左右失效。一般地，居中绝对定位元素，left:50%;top:50%;再margin负值或者通过transform也可达到效果。今天发现另一个技巧，利用，top,left,right,bottom取值0，再magin:auto,即可实现居中。原因： F...

smallStone 2019-08-30 15:52 评论0 收藏0
css篇之absolute绝对定位元素居中技巧

摘要：一般地，居中绝对定位元素，再负值或者通过也可达到效果。今天发现另一个技巧，利用，取值，再即可实现居中。原因注子元素大的话，上下可居中，左右失效。一般地，居中绝对定位元素，left:50%;top:50%;再margin负值或者通过transform也可达到效果。今天发现另一个技巧，利用，top,left,right,bottom取值0，再magin:auto,即可实现居中。原因： F...

zhoutao 2019-08-01 16:17 评论0 收藏0