如何创建React Native布局？新手求助特定布局实现方案

嘿，作为React Native新手，这种布局其实完全不用慌，用RN自带的Flexbox布局就能轻松搞定！咱们先理清楚你要的结构：

• 第一行：单独占满宽度的一列
• 第二行：平分宽度的两列
• 第三行：再次单独占满宽度的一列

直接上可运行的代码示例，你可以直接复制到项目里测试：

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

const CustomLayout = () => {
  return (
    <View style={styles.container}>
      {/* 第一行：单列 */}
      <View style={styles.row1}>
        <Text>Row1 (contain only one column)</Text>
      </View>
      {/* 第二行：两列 */}
      <View style={styles.row2}>
        <View style={styles.column1}>
          <Text>column1</Text>
        </View>
        <View style={styles.column2}>
          <Text>column2</Text>
        </View>
      </View>
      {/* 第三行：单列 */}
      <View style={styles.row3}>
        <Text>Row3 (Row 3 with one column)</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column', // 外层容器垂直排列行，默认就是column，写出来更清晰
    padding: 10,
    gap: 10, // 行与行之间的间距，RN 0.71+支持，低版本可以用marginBottom替代
  },
  row1: {
    flex: 1, // 让行占满剩余空间的比例，这里三个行的flex都是1，会平分容器高度
    backgroundColor: '#e0f7fa',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 8,
  },
  row2: {
    flex: 1,
    flexDirection: 'row', // 这一行水平排列两个列
    gap: 10, // 列之间的间距
  },
  column1: {
    flex: 1, // 两个列都设为flex:1，会平分row2的宽度
    backgroundColor: '#ffe0b2',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 8,
  },
  column2: {
    flex: 1,
    backgroundColor: '#c8e6c9',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 8,
  },
  row3: {
    flex: 1,
    backgroundColor: '#f8bbd0',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 8,
  },
});

export default CustomLayout;

关键知识点解释： #

1. Flexbox核心：RN的布局默认就是Flexbox，外层container用flexDirection: 'column'让所有行垂直排列，这是默认值，写出来方便新手理解。
2. flex属性：给每个row设置flex:1，意味着它们会平分整个容器的可用高度；第二行的两个column设置flex:1，会平分该行的可用宽度。
3. 间距处理：用gap属性可以轻松设置行或列之间的间距，如果你用的RN版本低于0.71，把gap换成marginBottom（行之间）和marginLeft（列之间）就行。
4. 对齐方式：justifyContent: 'center'和alignItems: 'center'让文本在每个区块里居中显示，你可以根据需求改成flex-start、flex-end等。

如果需要调整某一行的高度比例，比如让第一行占2份，其他两行各占1份，只需要把row1的flex改成2，row2和row3保持1就行，非常灵活！

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