react-native弹性布局

React Native弹性布局是一种基于Flexbox布局模型的布局方式，它可以让你更轻松地创建具有弹性的用户界面。Flexbox是一种用于在屏幕上分配空间的CSS3布局模型，它可以将一个容器中的子元素沿着一个主轴和交叉轴进行对齐和排列。在React Native中，弹性布局可以让你使用一系列简单的布局属性来指定容器中的子元素如何进行布局。

具体而言，React Native中弹性布局有以下常用属性：

- `flex`：定义一个元素的伸缩能力，默认值为0，即不伸缩。
- `flexDirection`：定义元素在容器中的排列方向，可选值包括`row`(水平方向)、`column`(竖直方向)、`row-reverse`(反向水平方向)和`column-reverse`(反向竖直方向)。
- `justifyContent`：定义元素在主轴上的对齐方式，可选值包括`flex-start`、`center`、`flex-end`、`space-between`(两端对齐)和`space-around`(各个元素之间留有空隙)。
- `alignItems`：定义元素在交叉轴上的对齐方式，可选值包括`flex-start`、`center`、`flex-end`、`stretch`(默认值，拉伸元素以填充交叉轴)和`baseline`(让元素按照它们的基线对齐)。

下面是一个使用弹性布局实现水平居中和竖直居中的例子：

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'red',
  },
});

const App = () => {
  return (
    <View style={styles.container}>
      <View style={styles.box} />
    </View>
  );
};

export default App;

这里的`container`使用了弹性布局，并且使用了`justifyContent`和`alignItems`来实现水平和竖直居中。