如何在React Native中将页面主体拆分为三个部分

在React Native中使用Flexbox布局实现页面拆分，以下是两种常见场景的实现代码：

场景1：三个部分均分高度 #

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

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

const styles = StyleSheet.create({
  container: {
    flex: 1, // 容器占满整个屏幕高度
  },
  section: {
    flex: 1, // 每个子View平分容器剩余空间
    borderWidth: 1,
    borderColor: '#ccc',
  },
});

export default ThreePartLayout;

场景2：顶部+底部固定高度，中间自适应占满 #

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

const ThreePartLayout = () => {
  return (
    <View style={styles.container}>
      <View style={styles.topSection} />
      <View style={styles.middleSection} />
      <View style={styles.bottomSection} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  topSection: {
    height: 100, // 固定顶部高度
    borderWidth: 1,
    borderColor: '#ccc',
  },
  middleSection: {
    flex: 1, // 中间部分自动占满剩余空间
    borderWidth: 1,
    borderColor: '#ccc',
  },
  bottomSection: {
    height: 80, // 固定底部高度
    borderWidth: 1,
    borderColor: '#ccc',
  },
});

export default ThreePartLayout;

关键要点：

• 父容器必须设置flex:1，才能让子元素基于屏幕高度布局
• React Native默认是垂直布局（flexDirection: column），无需额外设置
• 子元素的flex属性用于分配剩余空间，数值越大占比越高

内容的提问来源于stack exchange，提问作者cOd3