react-native 布局篇之position

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

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

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

idc机房托管混合云 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
[React Native Android 安利系列]样式与布局的书写

摘要：形式本身是的对象形式。我们先调整其为，如图图可见第二个元素虽然脱离了文档流但是还是在原先的位置上。设定为了与自己未脱离文档流时候的和一致。我们来实验一下，如图图我们看到，文档流中后出现的覆盖掉了。欢迎大家收看react-native-android系列教程，跟着本系列教程学习，可以熟练掌握react-native-android的开发，你值得拥有：https://segmentfau...

kycool 2019-06-25 10:39 评论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
粮草先行——Android折叠屏开发技术点番外篇之运行时变更处理原则

摘要：上一篇文章中，我们有提到在屏幕尺寸发生变更时的处理方式，总共有两种重启以适应屏幕改变手动处理数据，避免重启。因此，本文也同样适用于改变屏幕方向等情况的处理。上一篇文章中，我们有提到Activity在屏幕尺寸发生变更时的处理方式，总共有两种：重启APP以适应屏幕改变；手动处理数据，避免APP重启。同样，这两种方式也同时适用于改变屏幕方向、更改系统语言、甚至输入法等等。因此，本文也同...

fuchenxuan 2019-04-23 15:13 评论0 收藏0