ReactNative學習筆記十三之佈局詳細解析

時間 2019-11-24

標籤 reactnative 學習筆記十三佈局詳細解析简体版

原文原文鏈接

又是一週過去了，彷佛上週我只更新了一篇文章，最近工做實在太忙，望你們見諒。今天要講的仍是佈局相關的，以前已經對佈局中主要屬性作了介紹，此次，會對佈局中其餘屬性進行介紹。android

alignSelf

alignSelf是指相對於父容器，自身的位置，有auto,flex-start,flex-end,center,stretch五種屬性，對應效果以下：ios

aspectRatio

用來表示寬高比，React Native獨有。是一個很好的屬性，例如知道了圖片展現的比例，寬度是屏幕寬度，這樣就不須要計算寬度再計算高度，只須要設置一下就好了。bash

movieImage:{
        width: 100,
        aspectRatio: 0.758,
    },複製代碼

backgroundColor

背景顏色這個很少說了吧佈局

border相關

與border相關的屬性有：flex

borderBottomColor
borderBottomLeftRadius
borderBottomRightRadius
borderBottomWidth
borderColor
borderLeftColor
borderLeftWidth
borderRadius
borderRightColor
borderRightWidth
borderStyle
borderTopColor
borderTopLeftRadius
borderTopRightRadius
borderTopWidth
borderWidth
這裏要說明，若是隻設置某個邊界的寬度和顏色，不能設置圓角，不然沒法顯示，圓角只能使用borderWidth來設置，若是想設置單邊的，能夠參考以下：ui
```
border: {
      width:100,
      height:100,
      backgroundColor: '#fff',
      borderBottomColor:'#f57f17',

      borderBottomWidth:12
  },複製代碼
```
效果以下：spa

若是設置了圓角，單邊的寬度與顏色將失效，給一個例子，你們體驗一下：

border: {
        width:100,
        height:100,
        backgroundColor: '#fff',
        borderBottomColor:'#f57f17',
        borderBottomLeftRadius:10,
        borderBottomRightRadius:20,
        borderRightColor:'#b9f6ca',
        borderTopLeftRadius:10,
        borderTopWidth:6,
        borderTopColor:'#1e88e5',
        borderTopRightRadius:20,
        borderWidth:2,
        borderColor:'#c2185b'
    },複製代碼

效果以下:3d

margin

與margin相關的屬性有：netty

marginLeft
marginRight
marginTop
marginBottom

margin
margin表示的是距離兄弟組件或父容器邊界的距離，上邊界距離父容器上邊界等舉個例子以下：

border: {
      width:100,
      height:100,
      backgroundColor: '#fff',
      borderBottomColor:'#f57f17',
      borderBottomLeftRadius:10,
      borderBottomRightRadius:20,
      borderRightColor:'#b9f6ca',
      borderTopLeftRadius:10,
      borderTopWidth:6,
      borderTopColor:'#1e88e5',
      borderTopRightRadius:20,
      borderWidth:2,
      borderColor:'#c2185b',
      marginLeft:20,
      marginRight:20,
      marginTop:20,
  },複製代碼

效果以下：

這裏有個疑問，爲何左邊是20的margin可是右邊不是，其實這裏的margin包含一層意思，就是距離的最小值，如上面的佈局，若是不加margin，默認是從最左邊開始的，這樣咱們設置了marginLeft以後，距離左邊界就是20了，可是右邊界自己距離就超過了20，因此也算是正確的。

Transforms

與之相關的屬性主要有translate，scale，以及rotate這裏直接
首先須要介紹的是translate，這個很好理解，就是沿XYZ移動的距離
X軸正方向：手機右側爲正，向左爲負；
Y軸正方向：手機下方爲正，上方爲負；
Z軸正方向：從手機背面向屏幕指向爲負，反之從屏幕向背面指向爲正，看個例子，跟上面的示意圖能夠作個對比：code

border: {
        width:100,
        height:100,
        backgroundColor: '#fff',
        borderBottomColor:'#f57f17',
        borderBottomLeftRadius:10,
        borderBottomRightRadius:20,
        borderRightColor:'#b9f6ca',
        borderTopLeftRadius:10,
        borderTopWidth:6,
        borderTopColor:'#1e88e5',
        borderTopRightRadius:20,
        borderWidth:2,
        borderColor:'#c2185b',
        transform:[{translate:[40,140,40]}]
    },複製代碼

效果以下：

而後是scale和rotate，這裏咱們仍是舉個例子看一下：

border: {
        width:100,
        height:100,
        backgroundColor: '#fff',
        borderBottomColor:'#f57f17',
        borderBottomLeftRadius:10,
        borderBottomRightRadius:20,
        borderRightColor:'#b9f6ca',
        borderTopLeftRadius:10,
        borderTopWidth:6,
        borderTopColor:'#1e88e5',
        borderTopRightRadius:20,
        borderWidth:2,
        borderColor:'#c2185b',
        transform:[{translate:[40,140,40]},{scaleX:2},{rotateX:'45deg'}]
    },複製代碼

這裏是指繞x軸旋轉45度，記住，旋轉度數必定要加deg，而後沿X軸放大兩倍
效果以下：

陰影相關

ios的方法

shadowColor設置陰影色
shadowOffset設置陰影偏移
shadowOpacity 設置陰影不透明度
shadowRadius 設置陰影模糊半徑
android的方法

elevation仰角，經過爲視圖增長「仰角」方式來提供陰影，仰角越大，陰影越大。

border: {
      width:100,
      height:100,
      backgroundColor: '#fff',
      borderBottomColor:'#f57f17',
      borderBottomLeftRadius:10,
      borderBottomRightRadius:20,
      borderRightColor:'#b9f6ca',
      borderTopLeftRadius:10,
      borderTopWidth:6,
      borderTopColor:'#1e88e5',
      borderTopRightRadius:20,
      borderWidth:2,
      borderColor:'#c2185b',
      shadowOffset: {width: 0, height: 0},
      marginLeft:50,
      marginTop:50,
      elevation: 20,
      shadowOffset: {width: 0, height: 0},
      shadowColor: 'black',
      shadowOpacity: 1,
      shadowRadius: 5
  },複製代碼

效果以下：

textAlign

文字相對於Textview的佈局位置:auto left right center
更改一下佈局方式，如：

myTextColor1: {

        alignSelf:'stretch',
        textAlign:'auto',
        color: '#ffffff',
        backgroundColor: '#f57f17',
    },複製代碼

同理其它分別對應左中右。效果以下：

textAlignVertical

有了上面的描述textAlignVertical不難理解，就是垂直方向文字相對於Textview的佈局位置:auto bottom top center
爲了看到垂直位置，咱們須要固定一下Textview的高度：

myTextColor1: {
        height:70,
        marginBottom:10,
        alignSelf:'stretch',
        textAlign:'auto',
        textAlignVertical:'auto',
        color: '#ffffff',
        backgroundColor: '#f57f17',

    },複製代碼

效果以下：

position

在介紹position以前，咱們先看一下margin的例子：

render() {
        return (

                <View style = {styles.container}>
                    <View style = {styles.view1}/>
                    <View style = {styles.view2}/>
                </View>


        );
    }複製代碼

container: {
        flex:1,
        backgroundColor: '#fff',

    },
    view1:{
        width:100,
        height:100,
        backgroundColor: '#000',
    },
    view2:{
        width:100,
        height:100,
        marginTop:10,
        backgroundColor: '#000',
    },複製代碼

效果以下所示：

以前說了，margin是指距離兄弟組件或父容器邊界的距離，因此上邊的例子，加入 marginTop:10,以後，距離上一個view有10的距離
若是不設置，兩個view會連在一塊兒
因此不論你如何設置，都不可能使組件重疊，或一個view壓在另外一個view上。若是你的項目有這種需求，就只能使用 position了，放了看着方便，下面的佈局我會將兩個view的背景顏色換一下。
如今咱們將佈局代碼改一下：

view1:{
        width:100,
        height:100,
        position:'absolute',
        backgroundColor: '#000',
        top:0,
        left:20,
    },
    view2:{
        width:100,
        height:100,
        position:'absolute',
        backgroundColor: '#f57f17',
        top:30,
        left:20,
    },複製代碼

使用了position:'absolute',絕對佈局。這個是相對於父容器進行絕對佈局。也就是全部設置的位置都是相對於父容器的而不是兄弟節點，也不用去考慮兄弟節點的位置，效果以下：

能夠看出，top，left都是指距離父容器邊界的距離。
position還有一個屬性是relative，也就是相對佈局，這個就是相對於兄弟節點了，咱們也能夠看一下：

view1:{
        width:100,
        height:100,
        position:'relative',
        backgroundColor: '#000',
        top:0,
        left:20,
    },
    view2:{
        width:100,
        height:100,
        position:'relative',
        backgroundColor: '#f57f17',
        top:-30,
        left:-20,
    },複製代碼

效果以下圖所示：