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

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

alignSelf

alignSelf是指相对于父容器,自身的位置,有auto,flex-start,flex-end,center,stretch五种属性,对应效果如下:

ReactNative学习笔记十三之布局详细解析_第1张图片

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
    },

效果如下:

ReactNative学习笔记十三之布局详细解析_第2张图片

如果设置了圆角,单边的宽度与颜色将失效,给一个例子,大家体验一下:

 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'
    },

效果如下:

ReactNative学习笔记十三之布局详细解析_第3张图片

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,
    },

效果如下:

ReactNative学习笔记十三之布局详细解析_第4张图片

这里有个疑问,为什么左边是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]}]
    },

效果如下:

ReactNative学习笔记十三之布局详细解析_第5张图片

然后是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轴放大两倍
效果如下:

ReactNative学习笔记十三之布局详细解析_第6张图片

阴影相关

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
    },

效果如下:

ReactNative学习笔记十三之布局详细解析_第7张图片

textAlign

文字相对于Textview的布局位置:auto left right center
更改一下布局方式,如:

 myTextColor1: {

        alignSelf:'stretch',
        textAlign:'auto',
        color: '#ffffff',
        backgroundColor: '#f57f17',
    },

同理其它分别对应左中右。效果如下:

ReactNative学习笔记十三之布局详细解析_第8张图片

textAlignVertical

有了上面的描述textAlignVertical不难理解,就是垂直方向文字相对于Textview的布局位置:auto bottom top center
为了看到垂直位置,我们需要固定一下Textview的高度:

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

    },

效果如下:

ReactNative学习笔记十三之布局详细解析_第9张图片

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',
    },

效果如下所示:

ReactNative学习笔记十三之布局详细解析_第10张图片

之前说了,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',绝对布局。这个是相对于父容器进行绝对布局。也就是所有设置的位置都是相对于父容器的而不是兄弟节点,也不用去考虑兄弟节点的位置,效果如下:

ReactNative学习笔记十三之布局详细解析_第11张图片

可以看出,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,
    },

效果如下图所示:

ReactNative学习笔记十三之布局详细解析_第12张图片

总的来说,对于一些复杂布局,使用position还是很方便的。

总结

这次关于布局的这篇文章,几乎涵盖了所有的布局方法,对于初学者来说,看懂这篇文章,用的例子,自己去试一下,改一下,差不多就能搞定所有布局了,当然还要加上我之前的那篇关于容器布局的方法。


之前文章合集:
Android文章合集
iOS文章合集
ReactNative文章合集
如果你也做ReactNative开发,并对ReactNative感兴趣,欢迎关注我的公众号,加入我们的讨论群:

ReactNative学习笔记十三之布局详细解析_第13张图片

你可能感兴趣的:(ReactNative学习笔记十三之布局详细解析)