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

mymdeep發表於2017-08-08
React筆記

又是一週過去了，似乎上週我只更新了一篇文章，最近工作實在太忙，望大家見諒。今天要講的還是佈局相關的，之前已經對佈局中主要屬性做了介紹，這次，會對佈局中其他屬性進行介紹。

alignSelf

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

aspectRatio

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

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

backgroundColor

背景顏色這個不多說了吧

border相關

與border相關的屬性有：

  • borderBottomColor
  • borderBottomLeftRadius
  • borderBottomRightRadius
  • borderBottomWidth
  • borderColor
  • borderLeftColor
  • borderLeftWidth
  • borderRadius
  • borderRightColor
  • borderRightWidth
  • borderStyle
  • borderTopColor
  • borderTopLeftRadius
  • borderTopRightRadius
  • borderTopWidth

  • borderWidth
    這裡要說明，如果只設定某個邊界的寬度和顏色，不能設定圓角，否則無法顯示，圓角只能使用borderWidth來設定，如果想設定單邊的，可以參考如下：

    border: {
      width:100,
      height:100,
      backgroundColor: '#fff',
      borderBottomColor:'#f57f17',

      borderBottomWidth:12
  },複製程式碼

    效果如下：


如果設定了圓角，單邊的寬度與顏色將失效，給一個例子，大家體驗一下：

 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'
    },複製程式碼

效果如下:

margin

與margin相關的屬性有：

  • 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軸正方向：從手機背面向螢幕指向為負，反之從螢幕向背面指向為正，看個例子，跟上面的示意圖可以做個對比：

    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,
    },複製程式碼

效果如下圖所示：


總的來說，對於一些複雜佈局，使用position還是很方便的。

總結

這次關於佈局的這篇文章，幾乎涵蓋了所有的佈局方法，對於初學者來說，看懂這篇文章，用的例子，自己去試一下，改一下，差不多就能搞定所有佈局了，當然還要加上我之前的那篇關於容器佈局的方法。

之前文章合集：
Android文章合集
iOS文章合集
ReactNative文章合集
如果你也做ReactNative開發，並對ReactNative感興趣，歡迎關注我的公眾號，加入我們的討論群：

相關文章