ReactNative学习笔记十三之布局详细解析

又是一周过去了，似乎上周我只更新了一篇文章，最近工作实在太忙，望大家见谅。今天要讲的还是布局相关的，之前已经对布局中主要属性做了介绍，这次，会对布局中其他属性进行介绍。

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 (

                
                    
                    
                


        );
    }

  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感兴趣，欢迎关注我的公众号，加入我们的讨论群：