<fieldset id="c4yum"></fieldset>

<del id="c4yum"></del>

react-native 布局篇之position

Lemon_95 發布于2019-08-20 18:11 / 976人閱讀

摘要：先簡單的看一下示例圖相對布局。這個是相對于父容器進行據對布局。絕對布局是脫離文檔流的，不過奇怪的是依舊在文檔層次結構里面，這個和的也很大不一樣。

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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