React Native 系列(四) -- 布局

前言

本系列是基于React Native版本号0.44.3写的。RN支持CSS中的布局属性，因此可以使用CSS布局属性，这里就不详细地讲解了，这篇文章的重点主要是讲述一下RN中的Flex布局。

CSS属性布局

视图边框

何时使用？想要设置自己周边有边框的时候
注意点：一定要设置边框宽度

borderBottomWidth number 底部边框宽度

borderLeftWidth number 左边框宽度

borderRightWidth number 右边框宽度

borderTopWidth number 顶部边框宽度

borderWidth number 边框宽度

border<Bottom|Left|Right|Top>Color 各方向边框的颜色,<>表示连着一起，例如borderBottomColor

borderColor 边框颜色

尺寸

width number

height number

外边距

margin number 外边距

marginBottom number 下外边距

marginHorizontal number 左右外边距

marginLeft number 左外边距

marginRight number 右外边距

marginTop number 上外边距

marginVertical number 上下外边距

注意marginRight和width冲突，如果设置了width，marginRight无效。

内边距

padding number 内边距

paddingBottom number 下内边距

paddingHorizontal number 左右内边距

paddingLeft number 做内边距

paddingRight number 右内边距

paddingTop number 上内边距

paddingVertical number 上下内边距

这里想跟大家介绍一下网页中的盒子模型布局，看图说明一切：

相对定位和绝对定位

边缘

left number 左边缘

right number 右边缘

top number 上边缘

bottom number 下边缘

定位

通过left、right、top、bottom边缘属性进行定位。

absolute：绝对定位，参照父控件位置定位

relative：相对定位，参照当前控件原始位置定位

Flex 布局

使用RN开发，一般都采用Flex布局，使用这套布局就非常快。

Flex 简介

Flex布局又叫弹性布局，会把组件看成一个容器，它的所有子组件都是它容器中的成员，通过Flex，就能迅速布局子成员。

Flex 主轴和侧轴

Flex中有两个重要的概念就是：主轴和侧轴
主轴和侧轴之间的关系是相互垂直的
主轴：决定子组件默认的布局方向：水平、竖直
侧轴：决定子组件与主轴垂直的方向
- 比如主轴水平，那么子组件默认水平布局排布，侧轴就是控制子组件在竖直方向上的布局

flexDirection属性

flexDirection：决定子组件主轴的方向，水平或者竖直

flexDirection共有4个值，在RN中默认是column。

row:主轴水平方向，从左往右。依次排列

row-reverse:主轴水平方向，从右往左。依次排列

column:主轴竖直方向，从上往下。依次排列

column-reverse:主轴竖直方向，从下往上。依次排列

代码演练：

export default class RNDemoOne extends Component {

  render() {

    return (

      <View style={styles.container}>

          <Text style={styles.baseTextStyle}>1</Text>

          <Text style={styles.baseTextStyle}>2</Text>

          <Text style={styles.baseTextStyle}>3</Text>

          <Text style={styles.baseTextStyle}>4</Text>

      </View>

    );

  }

}

const styles = StyleSheet.create({

  container: {

      flex: 1,

      backgroundColor: '#F5FCFF',

      flexDirection: 'row'

  },

    baseTextStyle: {

      height: 50,

      width: 50,

        fontSize: 15,

        backgroundColor: '#FF3333',

        margin: 20,

        textAlign: 'center',

    }

});

效果图：

row
row-reverse
column
column-reverse

flexWrap属性

flexWrap决定子控件在父视图类是否允许多行排列。
flexWrap共有两个值，默认为nowrap

nowrap 组件排列在一行，可能导致溢出

wrap 组件在一行显示不下时，会换行

将上述代码中<Text></Text>组件的宽度改为 75 。

效果：

nowrap
wrap

justifyContent

justifyContent设置主轴子组件具体布局，是靠左，还是居中等。
justifyContent共有5个值，默认为flex-start

flex-start: 子组件向主轴起点对齐，如果主轴水平，从左开始，如果主轴竖直，从上开始。

flex-end: 子组件向主轴终点对齐，如果主轴水平，从右开始，如果主轴竖直，从下开始。

center: 居中显示，注意：并不是让某一个子组件居中，而是整体效果居中。

space-between: 均匀分配，相邻元素间距相同。起点和终点靠边

space-around: 均匀分配，相邻元素间距相同。起点和终点间距是组件间间距的一半。