React Native视图网格布局：能否用Flex构建指定样式盒子？

当然可以用Flex实现这个布局啦！这在React Native里是非常常见的列表项/卡片布局，我直接给你拆解实现方式，附带完整代码：

核心思路 #

整个盒子用一个横向Flex容器（flexDirection: 'row'）分成左右两部分：

• 左侧：单独的容器放置数字，可根据需求做成圆形/方形，居中显示数字
• 右侧：一个纵向的容器（默认flexDirection: 'column'），分别放置上下两行文本

完整组件代码 #

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

// 可复用的盒子组件，接收数字、顶部文本、底部文本三个props
const TargetBox = ({ number, topLabel, bottomLabel }) => {
  return (
    <View style={styles.boxContainer}>
      {/* 左侧数字区域 */}
      <View style={styles.numberWrapper}>
        <Text style={styles.numberText}>{number}</Text>
      </View>
      {/* 右侧文本区域 */}
      <View style={styles.textWrapper}>
        <Text style={styles.topText}>{topLabel}</Text>
        <Text style={styles.bottomText}>{bottomLabel}</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  // 外层容器：横向排列，垂直居中，加个边框和圆角美化
  boxContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 16,
    borderWidth: 1,
    borderColor: '#e5e7eb',
    borderRadius: 8,
    marginVertical: 8,
    backgroundColor: '#fff',
  },
  // 数字容器：固定宽高，圆形背景，居中数字
  numberWrapper: {
    width: 56,
    height: 56,
    borderRadius: 28,
    backgroundColor: '#f3f4f6',
    justifyContent: 'center',
    alignItems: 'center',
  },
  numberText: {
    fontSize: 22,
    fontWeight: 'bold',
    color: '#1f2937',
  },
  // 文本容器：占据剩余空间，左边留间距
  textWrapper: {
    flex: 1,
    marginLeft: 12,
  },
  topText: {
    fontSize: 16,
    fontWeight: '600',
    color: '#111827',
  },
  bottomText: {
    fontSize: 14,
    color: '#6b7280',
    marginTop: 4, // 上下文本之间的间距
  },
});

export default TargetBox;

关键Flex特性说明 #

1. flexDirection: 'row'：让外层容器的子元素（数字区和文本区）横向排列，这是实现左右布局的核心
2. flex: 1：给右侧文本容器设置这个属性，它会自动占据左侧数字区之外的所有剩余宽度，确保文本区域能自适应屏幕宽度
3. alignItems: 'center'：让外层容器内的所有元素垂直居中，如果你希望右侧文本和数字顶部对齐，只需要移除这个属性即可
4. 右侧文本容器默认是纵向排列（flexDirection: 'column'），刚好满足上下两行文本的需求

你可以根据自己的设计需求，调整颜色、字体大小、间距、数字容器的形状（比如改成方形就把borderRadius设为0）等样式参数~

内容的提问来源于stack exchange，提问作者William M.