【大前端】React Native Flex 布局详解

React Native Flex 布局详解

目录

1. 前言

2. [Flexbox 在 React Native 中的特点](#Flexbox 在 React Native 中的特点)

3. [Flexbox 常用属性详解](#Flexbox 常用属性详解)

   • flexDirection
   • justifyContent
   • alignItems
   • alignSelf
   • flex
   • flexWrap
   • alignContent

4. 实战示例

5. 常见布局场景

   • [水平居中 + 垂直居中](#水平居中 + 垂直居中)
   • 固定底部按钮
   • 等分布局

6. 总结

---

前言

在 React Native 中，所有布局都基于 Flexbox 实现（而不是传统的 Web CSS 布局模型）。Flexbox 的强大之处在于它能方便地处理不同屏幕尺寸下的自适应布局，这对于移动端开发尤为重要。

---

Flexbox 在 React Native 中的特点

• React Native 默认使用 Flexbox 布局，而不是传统的 display: block/inline。
• 默认 flexDirection: column（Web 默认是 row）。
• 所有数值单位默认为 dp（设备独立像素） ，没有 px/em/%。

---

Flexbox 常用属性详解

1. flexDirection

决定主轴方向（子元素的排列方向）：

flexDirection: 'row'        // 横向排列
flexDirection: 'column'     // 纵向排列（默认）
flexDirection: 'row-reverse'
flexDirection: 'column-reverse'

2. justifyContent

决定子元素在主轴方向上的对齐方式：

justifyContent: 'flex-start'   // 默认，从头开始
justifyContent: 'flex-end'     // 从尾部开始
justifyContent: 'center'       // 居中
justifyContent: 'space-between'// 两端对齐，间距平分
justifyContent: 'space-around' // 每个元素两侧间距相等
justifyContent: 'space-evenly' // 间距平均分配

3. alignItems

决定子元素在交叉轴方向上的对齐方式：

alignItems: 'flex-start'
alignItems: 'flex-end'
alignItems: 'center'
alignItems: 'stretch' // 默认，子元素未设置高度/宽度时会拉伸

4. alignSelf

单独设置某个子元素在交叉轴上的对齐方式，覆盖父容器的 alignItems。

5. flex

决定元素如何相对分配剩余空间：

flex: 1   // 占据父容器剩余空间
flex: 2   // 占据的空间是 flex:1 元素的两倍

6. flexWrap

决定子元素是否换行：

flexWrap: 'nowrap' // 默认，不换行
flexWrap: 'wrap'   // 换行

7. alignContent

在多行布局（wrap 换行后）时，控制行之间的对齐方式：

alignContent: 'flex-start'
alignContent: 'flex-end'
alignContent: 'center'
alignContent: 'space-between'
alignContent: 'space-around'

---

实战示例

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

export default function FlexDemo() {
  return (
    <View style={styles.container}>
      <View style={styles.box}><Text>1</Text></View>
      <View style={styles.box}><Text>2</Text></View>
      <View style={styles.box}><Text>3</Text></View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',      // 横向排列
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  box: {
    width: 80,
    height: 80,
    backgroundColor: '#4CAF50',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 8,
  }
});

运行效果：三个绿色方块横向排列，居中对齐，间距均匀分布。

---

常见布局场景

场景一 水平居中 + 垂直居中

container: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center'
}

场景二 固定底部按钮

container: {
  flex: 1,
  justifyContent: 'flex-end',
  alignItems: 'center'
}

场景三 等分布局

row: {
  flexDirection: 'row'
},
item: {
  flex: 1,
  height: 60,
  backgroundColor: '#2196F3',
  margin: 4
}

---

总结

• React Native 默认使用 Flexbox 布局 ，默认方向是 column。
• 常用的 3 个核心属性：flexDirection 、justifyContent 、alignItems。
• flex 属性用于按比例分配空间，非常适合做自适应布局。
• 结合 flexWrap 和 alignContent 可以实现更加复杂的多行布局。

掌握 Flexbox，基本就能轻松应对 RN 的大部分布局需求。

---