React-Native学习，RN的容器Flex-Box布局

在React Native中，Flexbox是一种强大的布局模型，用于构建灵活的布局结构。Flexbox可以使你的UI组件在不同的屏幕大小和设备上保持一致性。

以下是一个简单的React Native Flexbox布局的例子：

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
 
const FlexBoxLayout = () => {
  return (
    <View style={styles.container}>
      <View style={styles.item1}>
        <Text>1</Text>
      </View>
      <View style={styles.item2}>
        <Text>2</Text>
      </View>
      <View style={styles.item3}>
        <Text>3</Text>
      </View>
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column', // 默认方向，可以省略
    justifyContent: 'center', // 垂直居中
    alignItems: 'center', // 水平居中
  },
  item1: {
    width: 50,
    height: 50,
    backgroundColor: 'blue',
  },
  item2: {
    width: 70,
    height: 70,
    backgroundColor: 'red',
    marginTop: 10, // 上边距
  },
  item3: {
    width: 90,
    height: 90,
    backgroundColor: 'green',
    marginTop: 10, // 上边距
  },
});
 
export default FlexBoxLayout;

在这个例子中，<View>组件作为Flexbox的容器，并使用flexDirection、justifyContent和alignItems属性来控制布局。item1、item2和item3是容器中的子元素，它们使用不同的尺寸和颜色来区分。通过marginTop属性，子元素之间的距离被设置为10。