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,
    },复制代码

效果以下图所示：

总的来讲，对于一些复杂布局，使用position仍是很方便的。

总结

此次关于布局的这篇文章，几乎涵盖了全部的布局方法，对于初学者来讲，看懂这篇文章，用的例子，本身去试一下，改一下，差很少就能搞定全部布局了，固然还要加上我以前的那篇关于容器布局的方法。

以前文章合集：
Android文章合集
 iOS文章合集
 ReactNative文章合集
若是你也作ReactNative开发，并对ReactNative感兴趣，欢迎关注个人公众号，加入咱们的讨论群：