React Native新手求助：如何实现示例图中的同款组件？

针对你的需求，我调整了代码来实现类似金融数据卡片的双列布局，修复了原代码的对齐问题，同时优化了组件的可维护性：

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

// 用数组管理数据，更易维护
const data = [
  { title: 'BVCC', value: '15.709', change: '2.65', changePercent: '2%' },
  { title: 'IBC', value: '--', change: '--', changePercent: '--' },
  { title: 'Industrial', value: '--', change: '--', changePercent: '--' },
  { title: 'Financiero', value: '--', change: '--', changePercent: '--' },
];

export default function SeccionA({navigation}) {
    return (
        <View style={styles.contenedor}>
            <View style={styles.listado} >
                {/* 用map遍历数据，避免重复代码 */}
                {data.map((item, index) => (
                    <View key={index} style={styles.listadoItem}>
                        <Text style={styles.itemTitle}>{item.title}</Text>               
                        <Text style={styles.itemValue}>{item.value}</Text>
                        <View style={styles.changeRow}>
                            <Text style={styles.changeValue}>{item.change}</Text>
                            <Text style={styles.changePercent}>{item.changePercent}</Text>
                        </View>
                    </View>
                ))}
            </View>        
        </View>
    );
}
   
const styles = StyleSheet.create({
    contenedor: {
        marginHorizontal: 10,
        marginTop: 15,
    },
    listado: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        gap: 10, // 用gap控制项之间的间距，比justifySpaceBetween更稳定
    },
    listadoItem: {
        flex: 1, // 自动平分宽度，适配不同屏幕
        minWidth: '48%', // 确保最小宽度，避免过窄
        backgroundColor: '#f5f5f5',
        borderRadius: 8,
        paddingVertical: 15,
        paddingHorizontal: 12,
        alignItems: 'center', // 内部元素水平居中
        justifyContent: 'center', // 垂直居中
        gap: 8, // 内部元素间距
    },
    itemTitle: {
        fontSize: 14,
        color: '#333',
        fontWeight: '500',
    },
    itemValue: {
        fontSize: 18,
        color: '#000',
        fontWeight: 'bold',
    },
    changeRow: {
        flexDirection: 'row',
        gap: 6,
    },
    changeValue: {
        fontSize: 13,
        color: '#2ecc71', // 绿色表示上涨
    },
    changePercent: {
        fontSize: 13,
        color: '#2ecc71',
        fontWeight: '500',
    },
});

关键优化点： #

• 数据驱动：把硬编码文本改成数组数据，后续新增/修改数据只需调整数组，无需修改JSX结构
• 卡片样式：给每个列表项添加背景色、圆角和内边距，还原常见的金融数据卡片样式
• 布局稳定性：用flex:1+minWidth替代flexBasis，配合gap控制间距，适配不同屏幕尺寸
• 样式分层：给不同类型的文本设置差异化样式，提升可读性
• 对齐优化：通过alignItems和justifyContent确保内部元素居中对齐

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