React Native中创建左侧跨2行大视图+右侧4小视图的布局咨询

你可以通过React Native的Flexbox布局来实现这个结构，核心思路是外层横向排列，左侧大视图占据固定宽度（或比例），右侧容器使用换行布局容纳四个小视图。以下是完整的实现代码：

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

const CustomLayout = () => {
  return (
    <View style={styles.container}>
      {/* 左侧跨两行的大视图 */}
      <View style={styles.leftBigView} />
      {/* 右侧四个小视图容器 */}
      <View style={styles.rightContainer}>
        <View style={styles.smallView} />
        <View style={styles.smallView} />
        <View style={styles.smallView} />
        <View style={styles.smallView} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row', // 外层横向排列
    borderWidth: 1,
    borderColor: '#000',
  },
  leftBigView: {
    width: '40%', // 大视图占总宽度的40%，可按需调整
    backgroundColor: '#FF9AA2',
    borderRightWidth: 1,
    borderColor: '#000',
  },
  rightContainer: {
    flex: 1, // 右侧容器占剩余宽度
    flexDirection: 'row',
    flexWrap: 'wrap', // 自动换行
  },
  smallView: {
    width: '50%', // 每个小视图占右侧容器宽度的50%
    height: '50%', // 每个小视图占右侧容器高度的50%，实现两行两列
    backgroundColor: '#FFB7B2',
    borderWidth: 1,
    borderColor: '#000',
    boxSizing: 'border-box', // 边框计入宽高，避免布局溢出
  },
});

export default CustomLayout;

关键样式说明： #

• container：设置为横向flex布局，让左右两部分并排显示。
• leftBigView：通过固定宽度比例（或具体数值）占据左侧区域，外层是纵向拉伸的flex容器，它会自动填满整个高度，实现跨两行的效果。
• rightContainer：用flexWrap: 'wrap'让内部小视图自动换行，配合flexDirection: 'row'实现横向排列换行。
• smallView：宽高各设为50%，确保四个小视图刚好填满右侧容器，形成两行两列的布局。

你可以根据需求调整各视图的宽度比例、背景色、边框样式等细节。

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