react native 布局笔记

宽高

在react native中，高宽都是无单位的(unitless）,它代表均是独立像素

下面有两种方式给组件（component）设置高宽（width and height）

固定尺寸（Fixed Dimensions）

import React, { Component } from 'react';
import { View } from 'react-native';

export default class FixedDimensionsBasics extends Component {
  render() {
    return (
      <View>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
        <View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
}

组件通过上述的方式设置宽高，不管在那个屏幕上显示效果都是一致的。

弹性尺寸（Flex Dimensions）

使用flex布局的组件会根据空间大小来弹性计算空间大小。通用使用flex:1来占满整个空间，然后其他兄弟组件共享母体flex,在各兄弟组件中，flex越大，占的空间就越大。

import React, { Component } from 'react';
import { View } from 'react-native';

export default class FlexDimensionsBasics extends Component {
  render() {
    return (
      // Try removing the `flex: 1` on the parent View.
      // The parent will not have dimensions, so the children can't expand.
      // What if you add `height: 300` instead of `flex: 1`?
      <View style={{flex: 1}}>
        <View style={{flex: 1, backgroundColor: 'powderblue'}} />
        <View style={{flex: 2, backgroundColor: 'skyblue'}} />
        <View style={{flex: 3, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
}

弹性布局（Flexbox）

Flexbox使用flex属性来控制它的弹性，它与web不同，在react native中只接受数字类型（number），其中为正负数和零

flex

直接上代码

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
 
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
          <View style={styles.red}/>
          <View style={styles.blue}/>
          <View style={styles.orange}/>
      </View>
    );
  }
}
   
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  red: {
      flex: 1,
      backgroundColor: 'red'
  },
  blue: {
      flex: 2,
      backgroundColor: 'blue'
  },
  orange: {
      flex:3
      backgroundColor: 'orange'
  }
});

上述代码就会按照父的View来平分空间，一共空间为1+2+3 red的Viewflex:1,则是1/6,类比所得2/6 3/6

-w364

flex布局的方向（flexDirection）

image

在Flexbox布局中有主轴（main axis）与副轴（cross）之分，主轴控制子元素排列方向,则是通过flexDirection来控制主轴的方向

flexDirection控制的属性可以选择为（row，column，row-reverse，column-reverse）

• row: 从左到右

• column(默认):从上到下

• row-reverse:从右到左

• column-reverse：从下到上

import React, { Component } from 'react';
import { View } from 'react-native';

export default class FlexDirectionBasics extends Component {
  render() {
    return (
      // Try setting `flexDirection` to `column`.
      <View style={{flex: 1, flexDirection: 'row'}}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

-w364

对齐内容 Justify Content

固定好主轴（main axis）方向之后，就可以通过justifyContent来确定子内容的对齐类型，可以选择类型有（flex-start，flex-end，center，space-between，space-around）

• flex-start（默认）: 子容器(children container)对齐主轴（main axis）的起点(start)

• flex-end:子容器(children container)对齐主轴（main axis）的终点（end）

• center:子容器居中对齐主轴

• space-between:子容器平分空间,首尾不需要间距

• space-around:子容器平分空间，首尾的间距是中间间距的一半

• space-evenly：子容器平分空间，每个间距都一致

-w364

alignItems

固定好主轴（main axis）方向，就可以通过alignItems来控制侧轴的方向（cross axis），可以设置的参数有（stretch,flex-start,flex-end,center,baseline）

• stretch（默认):填充

• flex-start：侧轴起点对齐

• flex-end:侧轴终点对齐

• center：侧轴居中对齐

• baseline:以第一行字的基线进行对齐

-w364

Flex Wrap

在react native Flex Wrap主轴（main-axis）是否溢出，只接受两个参数（wrap,no wrap）

• wrap: 换行显示
• no wrap:不换行
  
  image

Align Self

alignSelf跟alignItems有着相似的做法,Items是控制每个元素的在侧轴(cross axis)的大方向，而self精细调整每个元素在侧轴的位置，设置属性跟items一致

image

相对和绝对布局（Absolute & Relative Layout）

position接受的属性有（relative，absolute）

• relative（默认）

• absolute

  
  
  image

zIndex

通过zIndex来控制元素的谁来置顶，数字越大，就那个元素置顶

image

参考

关于布局使用的props
关于RN布局中使用的一些元素
官方文档flexbox教学